uni-select-field 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Paul
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,268 @@
+# uni-select-field
+
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/uni-select-field) [![DeepScan grade](https://deepscan.io/api/teams/16372/projects/31958/branches/1037935/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=16372&pid=31958&bid=1037935)
+
+<uni-select-field /> is an encapsulated Web Component built upon the foundation of the uniopen design language.
+
+Implementation is straightforward: simply slot a standard `select` element inside <uni-select-field />. The component instantly applies a user interface that aligns seamlessly with the uniopen design language guidelines. Furthermore, its visual styles can be dynamically adapted via native HTML attributes or JavaScript properties.
+
+![<uni-select-field />](https://blog.lalacube.com/mei/img/preview/uni-select-field.png)
+
+## Basic Usage
+
+&lt;uni-select-field /> is a web component. All we need to do is put the required script into your HTML document. Then follow &lt;uni-select-field />'s html structure and everything will be all set.
+
+
+- Required Script
+
+  ```html
+  <script
+    type="module"
+    src="https://unpkg.com/uni-select-field/mjs/wc-uni-select-field.js">        
+  </script>
+  ```
+
+- Structure
+
+  Put &lt;uni-select-field /> into HTML document. It will have different functions and looks with attribute mutation.
+
+  ```html
+  <uni-select-field subject="Subject" message="Supporting text">
+    <select
+      slot="select"
+      name="my-select"
+      required
+    >
+      <option value="" disabled selected>Please select</option>
+      <hr />
+      <option value="first">First Value</option>
+      <option value="second">Second Value</option>
+      <option value="third">Third Value</option>
+      <option value="third">Fourth Value (make it longer)</option>
+    </select>
+  </uni-select-field>
+  ```
+
+&lt;uni-select-field /> dynamically adjusts its user interface and core functionality by strictly adhering to the attributes of the encapsulated `select` element. Developers can leverage these capabilities and observe the corresponding behavioral shifts by modifying standard attributes—such as `disabled`, and `required`—directly on the select element.
+
+```html
+<uni-select-field>
+  <select
+    slot="select"
+    name="my-select"
+    required
+  >
+    <option value="" disabled selected>Please select</option>
+    <hr />
+    <option value="first">First Value</option>
+    <option value="second">Second Value</option>
+    <option value="third">Third Value</option>
+    <option value="third">Fourth Value (make it longer)</option>
+  </select>
+</uni-select-field>
+```
+
+## JavaScript Instantiation
+
+&lt;uni-select-field /> could also use JavaScript to create DOM element. Here comes some examples.
+
+```html
+<script type="module">
+import { UniSelectField } from 'https://unpkg.com/uni-select-field/mjs/wc-uni-select-field.js';
+
+const selectTemplate = document.querySelector('.my-select-template');
+
+// use DOM api
+const nodeA = document.createElement('uni-select-field');
+document.body.appendChild(nodeA);
+nodeA.appendChild(selectTemplate.content.cloneNode(true));
+
+// new instance with Class
+const nodeB = new UniSelectField();
+document.body.appendChild(nodeB);
+nodeB.appendChild(selectTemplate.content.cloneNode(true));
+</script>
+```
+
+## Style Customization
+
+Developers could apply styles to decorate &lt;uni-select-field />'s looking.
+
+```html
+<style>
+uni-select-field {
+  --uni-select-field-border-color-normal: transparent;
+  --uni-select-field-border-color-disabled: var(--ct_input-general_dim_container_default);
+  --uni-select-field-border-color-valid: var(--ct_text_success_general);
+  --uni-select-field-border-color-invalid: var(--ct_text_danger_general);
+  --uni-select-field-border-color-outline: var(--ct_input-general_main_stroke_default);
+
+  --uni-select-field-background-color-normal: var(--ct_input-general_dim_container_default);
+  --uni-select-field-background-color-readonly: var(--ct_input-general_dim_container_default);
+  --uni-select-field-background-color-disabled: var(--ct_input-general_dim_container_default);
+
+  --uni-select-field-text-color-normal: var(--ct_text_main_general);
+  --uni-select-field-text-color-readonly: var(--ct_text_main_general);
+  --uni-select-field-text-color-disabled: var(--ct_text_main_pale);
+  --uni-select-field-text-color-invalid: var(--ct_text_danger_general);
+
+  --uni-select-field-message-color-normal: var(--ct_text_main_subtle);
+  --uni-select-field-message-color-valid: var(--ct_text_success_general);
+  --uni-select-field-message-color-invalid: var(--ct_text_danger_general);
+
+  --uni-select-field-caret-color-normal: var(--ct_icon_main_subtle); 
+  --uni-select-field-caret-color-disabled: var(--ct_icon_main_pale);
+
+  --uni-select-field-subject-color: var(--ct_text_main_subtle);
+}
+</style>
+```
+
+&lt;uni-select-field /> also leverages the CSS ::part() selector, enabling developers to directly customize and style the icon.
+
+```html
+<style>
+uni-select-field {
+  &::part(icon-subject) {
+    ...
+  }
+}
+</style>
+```
+
+## Attributes
+
+&lt;uni-select-field /> component exposes a curated set of attributes, enabling developers to dynamically adjust the user interface. This provides the flexibility to tailor the component’s appearance to seamlessly adapt to any given context.
+
+- **size**
+
+  The  `size` attribute configures the overall dimensions of &lt;uni-select-field />. The component currently supports three standard options: `large`, `medium`, and `small`, defaulting to `medium`.
+
+  ```html
+  <uni-select-field
+    size="large"
+  >
+    <select
+      slot="select"
+      name="my-select"
+      required
+    >
+      <option value="" disabled selected>Please select</option>
+      <hr />
+      <option value="first">First Value</option>
+      <option value="second">Second Value</option>
+      <option value="third">Third Value</option>
+      <option value="third">Fourth Value (make it longer)</option>
+    </select>
+  </uni-select-field>
+  ```
+
+- **subject**
+
+  The `subject` attribute controls the dynamic rendering of the subject content on &lt;uni-select-field />. By default, it is set to an empty string, meaning no content will be displayed.
+
+  ```html
+  <uni-select-field
+    subject="Your subject"
+  >
+    <select
+      slot="select"
+      name="my-select"
+      required
+    >
+      <option value="" disabled selected>Please select</option>
+      <hr />
+      <option value="first">First Value</option>
+      <option value="second">Second Value</option>
+      <option value="third">Third Value</option>
+      <option value="third">Fourth Value (make it longer)</option>
+    </select>
+  </uni-select-field>
+  ```
+
+  - **message**
+
+  The `message` attribute controls the dynamic rendering of the message content on &lt;uni-select-field />. By default, it is set to an empty string, meaning no content will be displayed.
+
+  ```html
+  <uni-select-field
+    message="Your message content"
+  >
+    <select
+      slot="select"
+      name="my-select"
+      required
+    >
+      <option value="" disabled selected>Please select</option>
+      <hr />
+      <option value="first">First Value</option>
+      <option value="second">Second Value</option>
+      <option value="third">Third Value</option>
+      <option value="third">Fourth Value (make it longer)</option>
+    </select>
+  </uni-select-field>
+  ```
+
+- **stat**
+
+  Through variations in the `stat` attribute, &lt;uni-select-field /> can dynamically transition between `valid` and `invalid` visual states, providing users with clear feedback on input correctness. By default, it is set to an empty string, which represents the standard, neutral state.
+
+  ```html
+  <uni-select-field
+    stat="invalid"
+  >
+    <select
+      slot="select"
+      name="my-select"
+      required
+    >
+      <option value="" disabled selected>Please select</option>
+      <hr />
+      <option value="first">First Value</option>
+      <option value="second">Second Value</option>
+      <option value="third">Third Value</option>
+      <option value="third">Fourth Value (make it longer)</option>
+    </select>
+  </uni-select-field>
+  ```
+
+- **appearance**
+
+  Currently, &lt;uni-select-field /> supports two distinct visual variants: `filled` and `outlined`. Developers can utilize the appearance attribute to configure the desired layout, which defaults to `filled`.
+
+  ```html
+  <uni-select-field
+    appearance="outlined"
+  >
+    <select
+      slot="select"
+      name="my-select"
+      required
+    >
+      <option value="" disabled selected>Please select</option>
+      <hr />
+      <option value="first">First Value</option>
+      <option value="second">Second Value</option>
+      <option value="third">Third Value</option>
+      <option value="third">Fourth Value (make it longer)</option>
+    </select>
+  </uni-select-field>
+  ```
+
+## Properties
+
+| Property Name | Type | Description |
+| ----------- | ----------- | ----------- |
+| size | String | Getter / Setter size. `size` configures the overall dimensions of &lt;uni-select-field />. The component currently supports three standard options: `large`, `medium`, and `small`, defaulting to `medium`. |
+| subject| String | Getter / Setter subject. `subject` controls the dynamic rendering of the subject content on &lt;uni-select-field />. By default, it is set to an empty string, meaning no content will be displayed. |
+| message| String | Getter / Setter message. `message` controls the dynamic rendering of the message content on &lt;uni-select-field />. By default, it is set to an empty string, meaning no content will be displayed. |
+| stat| String | Getter / Setter stat. `stat` can dynamically transition between `valid` and `invalid` visual states, providing users with clear feedback on input correctness. By default, it is set to an empty string, which represents the standard, neutral state. |
+| appearance| String | Getter / Setter appearance. `appearance` supports two distinct visual variants: `filled` and `outlined`. Developers can utilize the appearance attribute to configure the desired layout, which defaults to `filled`. |
+
+## Method
+| Mathod Signature | Description |
+| ----------- | ----------- |
+| refresh() | Force a UI refresh on &lt;uni-select-field />. |
+
+## Reference
+- [&lt;uni-select-field /> demo](https://blog.lalacube.com/mei/webComponent_uni-select-field.html)

package/index.html

@@ -0,0 +1,382 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<title>Web Component: &lt;uni-select-field /> - a web component based on uniopen design language</title>
+<meta name="description" content="uni-select-field is an encapsulated Web Component built upon the foundation of the uniopen design language. Implementation is straightforward: simply slot a standard select element inside uni-select-field. The component instantly applies a user interface that aligns seamlessly with the uniopen design language guidelines. Furthermore, its visual styles can be dynamically adapted via native HTML attributes or JavaScript properties." />
+<script type="module" src="mjs/wc-uni-select-field.js"></script>
+<link rel="stylesheet" href="https://blog.lalacube.com/mei/css/wc-base.css">
+<link rel="stylesheet" href="https://blog.lalacube.com/mei/css/layers/radio-set.css">
+<link rel="stylesheet" href="https://blog.lalacube.com/mei/css/layers/defaults.css">
+<style>
+#hd,#ft{display:none;}
+body{position:relative;inline-size:100vw;block-size:100vh;margin:0;}
+
+.wrap {
+  inline-size: 100%;
+  max-inline-size: min(800px, calc(100% - 2em));
+  box-sizing: border-box;
+}
+
+.demo-wrap {
+  position: relative;
+  inline-size: min(100%, 800px);
+  block-size: 160px;
+  background-color: rgba(var(--white));
+  margin: 6em auto 1em;
+  padding: 1.5em;
+  box-sizing: border-box;
+  border-radius: 1em;
+  display: flex;
+  align-items: center;
+
+  &+.setting-form {
+    --subject-inline-size: auto;
+    margin-block-start: 1em;
+  }
+}
+
+uni-select-field {
+  &::part(icon-subject) {
+    /*background-color: red;*/
+  }
+
+  &[data-hide-icon]::part(icon-subject) {
+    display: none;
+  }
+}
+
+[inert] uni-select-field {
+  --interactivity: inert;
+}
+</style>
+</head>
+
+<body class="flex-center">
+<div class="wrap">
+  <div class="demo-wrap">
+    <uni-select-field subject="Subject" message="Supporting text">
+      <select
+        slot="select"
+        required
+      >
+        <option value="" disabled selected>Please select</option>
+        <hr />
+        <option value="first">First Value</option>
+        <option value="second">Second Value</option>
+        <option value="third">Third Value</option>
+        <option value="third">Fourth Value (make it longer)</option>
+      </select>
+    </uni-select-field>
+  </div>
+
+  <form class="setting-form">
+    <ul class="adjustments">
+      <li class="adjustments__row">
+        <p class="adjustments__row__subject">size：</p>
+        <div class="adjustments__row__content">
+          <div class="il-pair a11y-block-link">
+            <div class="radio-set">
+              <input id="size-0" type="radio" name="size" value="large" />
+              <label class="radio-set__label" for="size-0"></label>
+            </div>
+
+            <label for="size-0">
+              large
+            </label>
+          </div>
+
+          <div class="il-pair a11y-block-link">
+            <div class="radio-set">
+              <input id="size-1" type="radio" name="size" value="medium" checked />
+              <label class="radio-set__label" for="size-1"></label>
+            </div>
+
+            <label for="size-1">
+              medium
+            </label>
+          </div>
+
+          <div class="il-pair a11y-block-link">
+            <div class="radio-set">
+              <input id="size-2" type="radio" name="size" value="small" />
+              <label class="radio-set__label" for="size-2"></label>
+            </div>
+
+            <label for="size-2">
+              small
+            </label>
+          </div>
+        </div>
+      </li>
+
+      <li class="adjustments__row">
+        <p class="adjustments__row__subject">appearance：</p>
+        <div class="adjustments__row__content">
+          <div class="il-pair a11y-block-link">
+            <div class="radio-set">
+              <input id="appearance-0" type="radio" name="appearance" value="filled" checked />
+              <label class="radio-set__label" for="appearance-0"></label>
+            </div>
+
+            <label for="appearance-0">
+              filled
+            </label>
+          </div>
+
+          <div class="il-pair a11y-block-link">
+            <div class="radio-set">
+              <input id="appearance-1" type="radio" name="appearance" value="outlined" />
+              <label class="radio-set__label" for="appearance-1"></label>
+            </div>
+
+            <label for="appearance-1">
+              outlined
+            </label>
+          </div>
+        </div>
+      </li>
+
+      <li class="adjustments__row">
+        <p class="adjustments__row__subject">stat：</p>
+        <div class="adjustments__row__content">
+          <div class="il-pair a11y-block-link">
+            <div class="radio-set">
+              <input id="stat-0" type="radio" name="stat" value="normal" checked />
+              <label class="radio-set__label" for="stat-0"></label>
+            </div>
+
+            <label for="stat-0">
+              normal
+            </label>
+          </div>
+
+          <div class="il-pair a11y-block-link">
+            <div class="radio-set">
+              <input id="stat-1" type="radio" name="stat" value="valid" />
+              <label class="radio-set__label" for="stat-1"></label>
+            </div>
+
+            <label for="stat-1">
+              valid
+            </label>
+          </div>
+
+          <div class="il-pair a11y-block-link">
+            <div class="radio-set">
+              <input id="stat-2" type="radio" name="stat" value="invalid" />
+              <label class="radio-set__label" for="stat-2"></label>
+            </div>
+
+            <label for="stat-2">
+              invalid
+            </label>
+          </div>
+
+        </div>
+      </li>
+
+      <li class="adjustments__row">
+        <p class="adjustments__row__subject">subject：</p>
+        <div class="adjustments__row__content">
+          <div class="il-pair a11y-block-link">
+            <div class="radio-set">
+              <input id="subject-0" type="radio" name="subject" value="show" checked />
+              <label class="radio-set__label" for="subject-0"></label>
+            </div>
+
+            <label for="subject-0">
+              show
+            </label>
+          </div>
+
+          <div class="il-pair a11y-block-link">
+            <div class="radio-set">
+              <input id="subject-1" type="radio" name="subject" value="hide" />
+              <label class="radio-set__label" for="subject-1"></label>
+            </div>
+
+            <label for="subject-1">
+              hide
+            </label>
+          </div>
+        </div>
+      </li>
+
+      <li class="adjustments__row">
+        <p class="adjustments__row__subject">subject icon：</p>
+        <div class="adjustments__row__content">
+          <div class="il-pair a11y-block-link">
+            <div class="radio-set">
+              <input id="subject-icon-0" type="radio" name="icon" value="show" checked />
+              <label class="radio-set__label" for="subject-icon-0"></label>
+            </div>
+
+            <label for="subject-icon-0">
+              show
+            </label>
+          </div>
+
+          <div class="il-pair a11y-block-link">
+            <div class="radio-set">
+              <input id="subject-icon-1" type="radio" name="icon" value="hide" />
+              <label class="radio-set__label" for="subject-icon-1"></label>
+            </div>
+
+            <label for="subject-icon-1">
+              hide
+            </label>
+          </div>
+        </div>
+      </li>
+
+      <li class="adjustments__row">
+        <p class="adjustments__row__subject">message：</p>
+        <div class="adjustments__row__content">
+          <div class="il-pair a11y-block-link">
+            <div class="radio-set">
+              <input id="message-0" type="radio" name="message" value="show" checked />
+              <label class="radio-set__label" for="message-0"></label>
+            </div>
+
+            <label for="message-0">
+              show
+            </label>
+          </div>
+
+          <div class="il-pair a11y-block-link">
+            <div class="radio-set">
+              <input id="message-1" type="radio" name="message" value="hide" />
+              <label class="radio-set__label" for="message-1"></label>
+            </div>
+
+            <label for="message-1">
+              hide
+            </label>
+          </div>
+        </div>
+      </li>
+
+      <li class="adjustments__row">
+        <p class="adjustments__row__subject">required：</p>
+        <div class="adjustments__row__content">
+          <div class="il-pair a11y-block-link">
+            <div class="radio-set">
+              <input id="required-0" type="radio" name="required" value="y" checked />
+              <label class="radio-set__label" for="required-0"></label>
+            </div>
+
+            <label for="required-0">
+              yes
+            </label>
+          </div>
+
+          <div class="il-pair a11y-block-link">
+            <div class="radio-set">
+              <input id="required-1" type="radio" name="required" value="n" />
+              <label class="radio-set__label" for="required-1"></label>
+            </div>
+
+            <label for="required-1">
+              no
+            </label>
+          </div>
+        </div>
+      </li>
+
+      <li class="adjustments__row">
+        <p class="adjustments__row__subject">disabled：</p>
+        <div class="adjustments__row__content">
+          <div class="il-pair a11y-block-link">
+            <div class="radio-set">
+              <input id="disabled-0" type="radio" name="disabled" value="y" />
+              <label class="radio-set__label" for="disabled-0"></label>
+            </div>
+
+            <label for="disabled-0">
+              yes
+            </label>
+          </div>
+
+          <div class="il-pair a11y-block-link">
+            <div class="radio-set">
+              <input id="disabled-1" type="radio" name="disabled" value="n" checked />
+              <label class="radio-set__label" for="disabled-1"></label>
+            </div>
+
+            <label for="disabled-1">
+              no
+            </label>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </form>
+</div>
+
+<script type="module">
+await customElements.whenDefined('uni-select-field');
+
+const wrap = document.querySelector('.demo-wrap');
+const uniSelectField = document.querySelector('.demo-wrap uni-select-field');
+const select = uniSelectField.querySelector('select');
+const form = document.querySelector('.setting-form');
+
+const handler = (evt) => {
+  const { target } = evt;
+  const formData = new FormData(form);
+  const fd = Object.fromEntries(formData.entries());
+
+  switch (target.name) {
+    case 'size': {
+      uniSelectField.size = fd['size'];
+      break;
+    }
+
+    case 'appearance': {
+      uniSelectField.appearance = fd['appearance'];
+      break;
+    }
+
+    case 'stat': {
+      uniSelectField.stat = fd['stat'] === 'normal' ? '' : fd['stat'];
+      break;
+    }
+
+    case 'subject': {
+      uniSelectField.subject = fd['subject'] === 'show' ? 'Subject' : '';
+      break;
+    }
+
+    case 'message': {
+      uniSelectField.message = fd['message'] === 'show' ? 'Supporting text' : '';
+      break;
+    }
+
+    case 'required': {
+      select.required = fd['required'] === 'y';
+
+      uniSelectField.refresh();
+      break;
+    }
+
+    case 'disabled': {
+      select.disabled = fd['disabled'] === 'y';
+
+      uniSelectField.refresh();
+      break;
+    }
+
+    case 'icon': {
+      uniSelectField.toggleAttribute('data-hide-icon', fd['icon'] === 'hide')
+      break;
+    }
+  }
+};
+
+form.addEventListener('input', handler);
+</script>
+
+</body>
+
+</html>