@xlabs-store/core 0.0.1 → 0.0.3

package/dist/collection/components/x-form-item/x-form-item.css

@@ -96,6 +96,7 @@
   --x-color-text-label: rgba(0, 0, 0, 0.65);
   --x-color-text-description: rgba(0, 0, 0, 0.45);
   --x-color-text-light-solid: #ffffff;
+  --x-color-text-processing: #ffffff;
   /** Background Colors **/
   --x-color-bg-container: #ffffff;
   --x-color-bg-elevated: #ffffff;
@@ -138,8 +139,10 @@
   --x-color-light-shade: #d7d8da;
   --x-color-light-tint: #f5f6f9;
   /** Font Family **/
-  --x-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --x-font-family-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --x-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --x-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   /** Font Sizes **/
   --x-font-size: 14px;
   --x-font-size-sm: 12px;
@@ -419,16 +422,16 @@
   align-items: center;
 }
 .x-form-item-label.x-form-item-label-left {
-  justify-content: flex-start !important;
-  text-align: left !important;
+  justify-content: flex-start;
+  text-align: left;
 }
 .x-form-item-label.x-form-item-label-right {
-  justify-content: flex-end !important;
-  text-align: right !important;
+  justify-content: flex-end;
+  text-align: right;
 }
 .x-form-item-label.x-form-item-label-center {
-  justify-content: center !important;
-  text-align: center !important;
+  justify-content: center;
+  text-align: center;
 }
 .x-form-item-label {
   margin-right: var(--x-form-item-label-margin-right, var(--x-spacing-md, 16px));
@@ -453,13 +456,16 @@
   content: " ";
 }
 .x-form-item-label label.x-form-item-required::before {
+  display: none;
+  content: none;
+}
+.x-form-item-label label .x-form-item-required-mark {
   display: inline-block;
-  margin-right: var(--x-form-item-required-margin-right, var(--x-spacing-xxs, 4px));
+  margin-left: var(--x-form-item-required-margin-left, var(--x-spacing-xxs, 4px));
   color: var(--x-form-item-color-error, var(--x-color-error, #ff4d4f));
   font-size: var(--x-form-item-font-size, var(--x-font-size-base, 14px));
   font-family: SimSun, sans-serif;
   line-height: 1;
-  content: "*";
 }
 
 .x-form-item-control {

package/dist/collection/components/x-form-item/x-form-item.js

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { FormControl } from "../../utils/form/core/form-control";
+const FORM_CHILD_SELECTORS = 'x-input, x-input-number, x-select, x-checkbox, x-switch, x-radio-group, x-date-picker, x-range-picker, x-time-picker, x-cascader, x-tree-select, x-slider, x-rate, x-upload, x-transfer, x-auto-complete, x-color-picker, x-editor, x-address';
 export class XFormItem {
     el;
     /**
@@ -93,19 +94,18 @@ export class XFormItem {
     }
     syncParentProps() {
         if (this.formEl) {
-            this.parentLayout = this.formEl.getAttribute('layout') || this.formEl.layout || 'horizontal';
+            const layout = this.formEl.getAttribute('layout') || this.formEl.layout || 'horizontal';
+            this.parentLayout = layout;
             this.parentColon = this.formEl.getAttribute('colon') !== 'false' && this.formEl.colon !== false;
             this.parentHideRequiredMark = this.formEl.getAttribute('hide-required-mark') === 'true' || this.formEl.hideRequiredMark === true;
-            this.parentLabelAlign = this.formEl.labelAlign || 'right';
+            this.parentLabelAlign = this.formEl.labelAlign || (layout === 'vertical' ? 'left' : 'right');
         }
     }
     setupObserver() {
         if (this.formEl && !this.observer) {
-            this.observer = new MutationObserver((mutations) => {
-                mutations.forEach((mutation) => {
-                    if (mutation.type === 'attributes' && (mutation.attributeName === 'layout' ||
-                        mutation.attributeName === 'colon' ||
-                        mutation.attributeName === 'hide-required-mark')) {
+            this.observer = new MutationObserver(mutations => {
+                mutations.forEach(mutation => {
+                    if (mutation.type === 'attributes' && (mutation.attributeName === 'layout' || mutation.attributeName === 'colon' || mutation.attributeName === 'hide-required-mark')) {
                         this.syncParentProps();
                     }
                 });
@@ -129,7 +129,15 @@ export class XFormItem {
             let control = this.formEl.form.get(this.name);
             if (!control) {
                 // Self-registration: create a control if it doesn't exist
-                const initialValue = this.formEl.initialValues?.[this.name];
+                let initialValue = this.formEl.initialValues?.[this.name];
+                // If no initial value from form, try to pick up from child component (respect defaultValue)
+                if (initialValue === undefined) {
+                    const input = this.el.querySelector(FORM_CHILD_SELECTORS);
+                    if (input) {
+                        // Priority: current value property -> defaultValue property -> value attribute
+                        initialValue = input[this.valuePropName] ?? input.defaultValue ?? input.value;
+                    }
+                }
                 control = new FormControl(initialValue);
                 this.formEl.form.addControl(this.name, control);
             }
@@ -138,6 +146,7 @@ export class XFormItem {
                 this.syncState(control);
                 this.unsubscribe = control.stateChanges(() => {
                     this.syncState(control);
+                    this.updateChildValue(control.value);
                 });
                 // Update child component value
                 this.updateChildValue(control.value);
@@ -146,7 +155,7 @@ export class XFormItem {
     }
     syncState(control) {
         if (control.touched || control.dirty) {
-            this.validateStatus = control.invalid ? 'error' : (control.pending ? 'validating' : 'success');
+            this.validateStatus = control.invalid ? 'error' : control.pending ? 'validating' : 'success';
             if (control.errors && !this.help) {
                 this.errorMessage = Object.values(control.errors)[0];
             }
@@ -154,17 +163,20 @@ export class XFormItem {
                 this.errorMessage = '';
             }
         }
+        else {
+            this.validateStatus = undefined;
+            this.errorMessage = '';
+        }
         const internalControl = control;
         const validators = (internalControl._validators || internalControl.validators || []);
-        const isRequired = Array.isArray(validators) && validators.some((v) => v.name === 'required' ||
-            (v.toString && v.toString().includes('required')) ||
-            (v.validator && v.validator.name === 'required'));
+        const isRequired = Array.isArray(validators) &&
+            validators.some(v => v.name === 'required' || (v.toString && v.toString().includes('required')) || (v.validator && v.validator.name === 'required'));
         if (isRequired && !this.required) {
             this.required = true;
         }
     }
     updateChildValue(value) {
-        const input = this.el.querySelector('x-input, x-input-number, x-select, x-checkbox, x-switch');
+        const input = this.el.querySelector(FORM_CHILD_SELECTORS);
         if (input && input[this.valuePropName] !== value) {
             input[this.valuePropName] = value;
         }
@@ -174,7 +186,9 @@ export class XFormItem {
             const detail = ev.detail;
             const value = detail?.[this.valuePropName] !== undefined
                 ? detail[this.valuePropName]
-                : (detail?.value !== undefined ? detail.value : ev.target[this.valuePropName]);
+                : detail?.value !== undefined
+                    ? detail.value
+                    : ev.target[this.valuePropName];
             this.control.setValue(value);
             this.control.markAsDirty();
         }
@@ -197,7 +211,7 @@ export class XFormItem {
         const isInline = layout === 'inline';
         const showColon = this.el.hasAttribute('colon') ? this.colon : this.parentColon;
         const hideMark = this.parentHideRequiredMark;
-        return (h(Host, { key: '9e53e5534b7091f5041150f831adec589cffa581', class: {
+        return (h(Host, { key: '9cf482a78e5ff73b3c5d8300baabd79d29c3515d', class: {
                 'x-form-item': true,
                 'x-form-item-with-help': !!displayHelp,
                 'x-form-item-has-error': this.validateStatus === 'error',
@@ -208,23 +222,27 @@ export class XFormItem {
                 'x-form-item-horizontal': isHorizontal,
                 'x-form-item-vertical': isVertical,
                 'x-form-item-inline': isInline,
-            } }, h("div", { key: 'c5dd09be09f559f986fb4d36c70f5c391622b107', class: "x-form-item-row" }, this.label && (h("div", { key: 'f77d9c4d9b5241a540546b9d674178f375e92c6d', class: {
+            } }, h("div", { key: 'f88e51dac70e42b937883da7580505c817dd1a1c', class: "x-form-item-row" }, this.label && (h("div", { key: '99ef16a5bb0ddee1aa711e93636066b8ac636f31', class: {
                 'x-form-item-label': true,
                 ...(typeof this.labelCol === 'string' ? { [this.labelCol]: true } : {}),
-                [`x-form-item-label-${this.labelAlign || this.parentLabelAlign || 'right'}`]: true
-            }, style: typeof this.labelCol === 'object' && this.labelCol?.span ? {
-                flex: `0 0 ${(this.labelCol.span / 24) * 100}%`,
-                maxWidth: `${(this.labelCol.span / 24) * 100}%`
-            } : {} }, h("label", { key: 'e4464d27147d1cee39619ad37cb7c5a6f9cb3139', class: {
+                [`x-form-item-label-${this.labelAlign || this.parentLabelAlign || 'left'}`]: true,
+            }, style: typeof this.labelCol === 'object' && this.labelCol?.span
+                ? {
+                    flex: `0 0 ${(this.labelCol.span / 24) * 100}%`,
+                    maxWidth: `${(this.labelCol.span / 24) * 100}%`,
+                }
+                : {} }, h("label", { key: '5df7d74ce1ae228ab23676c82d074c6677212913', class: {
                 'x-form-item-required': this.required && !hideMark,
-                'x-form-item-no-colon': !showColon
-            }, title: this.label }, this.label))), h("div", { key: '508207d8171598a5d2122eddc91ab9ddbedb8494', class: {
+                'x-form-item-no-colon': !showColon,
+            }, title: this.label }, this.label, this.required && !hideMark && h("span", { key: 'f9e288f677f6321f6084ca53050bdaf9e79b1ab0', class: "x-form-item-required-mark" }, "*")))), h("div", { key: '89079614d3b55955d8695886d53ab6a7357805c3', class: {
                 'x-form-item-control': true,
-                ...(typeof this.wrapperCol === 'string' ? { [this.wrapperCol]: true } : {})
-            }, style: typeof this.wrapperCol === 'object' && this.wrapperCol?.span ? {
-                flex: `0 0 ${(this.wrapperCol.span / 24) * 100}%`,
-                maxWidth: `${(this.wrapperCol.span / 24) * 100}%`
-            } : {} }, h("div", { key: 'b47d5161aaf6f42cd47781118b11094c599e240b', class: "x-form-item-control-input" }, h("div", { key: '3437bb735c66cafb7c463f7be885f19470fdf137', class: "x-form-item-control-input-content" }, h("slot", { key: '7f8b3ce874b4281e3a3f9eec36fe1f2a7a772a44' })), this.hasFeedback && this.validateStatus && (h("span", { key: '4e032dde91980865acc598ecb093d293f1188fa7', class: "x-form-item-children-icon" }, this.validateStatus === 'success' && (h("span", { key: 'b7af17e662a03db206209e6ac5fbb8e43630d2d5', role: "img", "aria-label": "check-circle", class: "anticon anticon-check-circle" }, h("svg", { key: '14772b5dbf639304b9fc6dc3fc64355a45ca880d', viewBox: "64 64 896 896", focusable: "false", "data-icon": "check-circle", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '1f5f902d9fd9cca98d5c6e0858a98bafcc346ae5', d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z" })))), this.validateStatus === 'error' && (h("span", { key: 'a26ddb33d965813b3b07c20579f96ea37a5ea5b7', role: "img", "aria-label": "close-circle", class: "anticon anticon-close-circle" }, h("svg", { key: 'c5a5ecb10bcbbb892a339747122e8245f0f19543', viewBox: "64 64 896 896", focusable: "false", "data-icon": "close-circle", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '5ad8e00a4a77691849eaede2b8a23baaf029805f', d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z" })))), this.validateStatus === 'warning' && (h("span", { key: '7ebd6dd058a5c99ac84a9d2941d89638b2b1e52a', role: "img", "aria-label": "exclamation-circle", class: "anticon anticon-exclamation-circle" }, h("svg", { key: 'b3e076d376e5b977fa8a7a3aeed8e827d393e340', viewBox: "64 64 896 896", focusable: "false", "data-icon": "exclamation-circle", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '57965d3b6febe5754bff10a1971e2a6f7e6f742c', d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z" })))), this.validateStatus === 'validating' && (h("span", { key: 'c6f937df1576cf819f82b781a51b4251327e58d0', role: "img", "aria-label": "loading", class: "anticon anticon-loading" }, h("svg", { key: '0ddc19bd99b81eb8d9cbfeef27713a84738821bc', viewBox: "0 0 1024 1024", focusable: "false", "data-icon": "loading", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true", class: "anticon-spin" }, h("path", { key: '4170c00b2eb78bca579c05afcde8c6f74b2534f6', d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" }))))))), displayHelp && (h("div", { key: 'c0fee0d5924b829c6e83fdde04e6f6b8083763c6', class: "x-form-item-explain" }, h("div", { key: '95dfa6a1a8d9643934e09c13ec7266fd8e824df4', role: "alert" }, displayHelp))), this.extra && (h("div", { key: 'b71cc65d15e1eae8ce0a904d0db956c0f549dcce', class: "x-form-item-extra" }, this.extra))))));
+                ...(typeof this.wrapperCol === 'string' ? { [this.wrapperCol]: true } : {}),
+            }, style: typeof this.wrapperCol === 'object' && this.wrapperCol?.span
+                ? {
+                    flex: `0 0 ${(this.wrapperCol.span / 24) * 100}%`,
+                    maxWidth: `${(this.wrapperCol.span / 24) * 100}%`,
+                }
+                : {} }, h("div", { key: '2c9a71a9632c8a87dbfdffc583ba0449ee044e31', class: "x-form-item-control-input" }, h("div", { key: '006af66bc7e35abc5c0228036e0d5ad2d9ecc5e6', class: "x-form-item-control-input-content" }, h("slot", { key: 'abbc4bbf0ff51ffdb6ff34aa93bcb9affc497a6d' })), this.hasFeedback && this.validateStatus && (h("span", { key: '09bb3d47911004389997c8c6994907c6f8f1abb4', class: "x-form-item-children-icon" }, this.validateStatus === 'success' && (h("span", { key: '808027aea16fbb89640bea3ad097e72ba2d47f86', role: "img", "aria-label": "check-circle", class: "anticon anticon-check-circle" }, h("svg", { key: 'd88a9b559da861a711e4f1b92e58f39f3557c7a5', viewBox: "64 64 896 896", focusable: "false", "data-icon": "check-circle", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: 'b1e887909a49d63060742eb6988c77c3e8cbfe54', d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z" })))), this.validateStatus === 'error' && (h("span", { key: '0ff41e7c9c6dfd5939bf22382f9ba15952eb47f1', role: "img", "aria-label": "close-circle", class: "anticon anticon-close-circle" }, h("svg", { key: '7fb94b4dd617658c1554543d6d76aedde8877dc2', viewBox: "64 64 896 896", focusable: "false", "data-icon": "close-circle", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '8e2385974a5baf1f85f91d7c7b57f267d454c8a6', d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z" })))), this.validateStatus === 'warning' && (h("span", { key: '4481c303e3b60b91f524e39be728ebe02a2f6d23', role: "img", "aria-label": "exclamation-circle", class: "anticon anticon-exclamation-circle" }, h("svg", { key: 'fee4f801dbbea1ac25a26551db99964e47d73faa', viewBox: "64 64 896 896", focusable: "false", "data-icon": "exclamation-circle", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: 'd3a6f8a5adf0a229b1222b4b86a318be294b0f52', d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z" })))), this.validateStatus === 'validating' && (h("span", { key: 'dddacb88738f6660abbf7f9ca3c2e40feecee8ad', role: "img", "aria-label": "loading", class: "anticon anticon-loading" }, h("svg", { key: 'c425586e1eeecc80ab5f450189898dd897486f93', viewBox: "0 0 1024 1024", focusable: "false", "data-icon": "loading", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true", class: "anticon-spin" }, h("path", { key: '986b518dfb1af1158430e64d132d44f0799c1d96', d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" }))))))), displayHelp && (h("div", { key: '0487a8f8890d07fe701b56d1811a893a602eebc6', class: "x-form-item-explain" }, h("div", { key: '748ccb6cda000ff110f47d5d4e2c6201924f14b4', role: "alert" }, displayHelp))), this.extra && h("div", { key: 'ba58634f527880fa75b106fa245ad5d495d60cf4', class: "x-form-item-extra" }, this.extra)))));
     }
     static get is() { return "x-form-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/x-header/x-header.css

@@ -96,6 +96,7 @@
   --x-color-text-label: rgba(0, 0, 0, 0.65);
   --x-color-text-description: rgba(0, 0, 0, 0.45);
   --x-color-text-light-solid: #ffffff;
+  --x-color-text-processing: #ffffff;
   /** Background Colors **/
   --x-color-bg-container: #ffffff;
   --x-color-bg-elevated: #ffffff;
@@ -138,8 +139,10 @@
   --x-color-light-shade: #d7d8da;
   --x-color-light-tint: #f5f6f9;
   /** Font Family **/
-  --x-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --x-font-family-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --x-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --x-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   /** Font Sizes **/
   --x-font-size: 14px;
   --x-font-size-sm: 12px;

package/dist/collection/components/x-header/x-header.js

@@ -12,7 +12,7 @@ export class XHeader {
      * </x-header>
      */
     render() {
-        return (h(Host, { key: '6e6eab6052ef8d4e6b0bdadb2a7829c8f41a8463' }, h("header", { key: '381433b9c5aa8ccf3480ed09b516b8fe5a65f469', class: "x-layout-header" }, h("slot", { key: 'fe84b8611ff9f56035cf8128346fa3133b14aba2' }))));
+        return (h(Host, { key: '2df9dd5ca8af31d0a53d6c34c306883a0f28c660' }, h("header", { key: '7e7a8da133ec55a79f7b77884133a9028efabb69', class: "x-layout-header" }, h("slot", { key: 'a8f08658f2d1437c1177da61dfa56218478fd028' }))));
     }
     static get is() { return "x-header"; }
     static get encapsulation() { return "shadow"; }