@pg-labs-incubator/cobweb 0.0.2 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@cw-attribute-roles cw-TextField;@property --_CW-FIELD-LABEL_PROGRESS{syntax: "<number>"; inherits: true; initial-value: 1;}@property --_CW-FIELD-LABEL_FLOATED{syntax: "<number>"; inherits: true; initial-value: 1;}@property --_CW-FIELD-LABEL_RESTED{syntax: "<number>"; inherits: true; initial-value: 0;}@layer cw-style{.cw-TextField{--_cw-field-affix-color: cw-var(--cw-TextField-input-affixColor);--_cw-field-caret-color: cw-var(--cw-TextField-input-caretColor);--_cw-field-container-color: cw-var(--cw-TextField-container-color);--_cw-field-height: cw-var(--cw-TextField-container-height);--_cw-field-icon-size: cw-var(--cw-TextField-icon-size);--_cw-field-indicator-color: cw-var(--cw-TextField-indicator-color);--_cw-field-indicator-focus-opacity: 0;--_cw-field-indicator-focus-thickness: cw-var(--cw-TextField-focus-indicatorThickness);--_cw-field-indicator-thickness: cw-var(--cw-TextField-indicator-thickness);--_cw-field-input-color: cw-var(--cw-TextField-input-color);--_cw-field-label-color: cw-var(--cw-TextField-label-color);--_cw-field-leading-color: cw-var(--cw-TextField-icon-leadingColor);--_cw-field-menu-color: cw-var(--cw-TextField-menu-color);--_cw-field-menu-elevation: cw-var(--cw-TextField-menu-elevation);--_cw-field-menu-item-height: cw-var(--cw-TextField-menu-itemHeight);--_cw-field-menu-item-label-color: cw-var(--cw-TextField-menu-itemLabelColor);--_cw-field-menu-item-padding: cw-var(--cw-TextField-menu-itemPadding);--_cw-field-menu-item-state-layer-color: cw-var(--cw-TextField-menu-itemStateLayerColor);--_cw-field-menu-shadow-color: cw-var(--cw-TextField-menu-shadowColor);--_cw-field-menu-shape: cw-var(--cw-TextField-menu-shape);--_cw-field-padding: cw-var(--cw-TextField-container-padding);--_cw-field-placeholder-color: cw-var(--cw-TextField-input-placeholderColor);--_cw-field-state-layer-color: transparent;--_cw-field-state-layer-opacity: cw-var(--cw-TextField-hover-stateLayerOpacity);--_cw-field-supporting-color: cw-var(--cw-TextField-supportingText-color);--_cw-field-trailing-color: cw-var(--cw-TextField-icon-trailingColor);-cw-border-radius:--cw-TextField-container-shape}.cw-TextField:where(:has(>.cw-TextField-control:hover)){--_cw-field-indicator-color: cw-var(--cw-TextField-hover-indicatorColor);--_cw-field-label-color: cw-var(--cw-TextField-hover-labelColor);--_cw-field-state-layer-color: cw-var(--cw-TextField-hover-stateLayerColor)}.cw-TextField:where(:has(.cw-TextField-input:focus)){--_cw-field-indicator-color: cw-var(--cw-TextField-focus-indicatorColor);--_cw-field-indicator-focus-opacity: 1;--_cw-field-label-color: cw-var(--cw-TextField-focus-labelColor);--_cw-field-trailing-color: cw-var(--cw-TextField-focus-trailingIconColor)}.cw-TextField:where(.cw-TextField-error){--_cw-field-caret-color: cw-var(--cw-TextField-error-caretColor);--_cw-field-indicator-color: cw-var(--cw-TextField-error-indicatorColor);--_cw-field-label-color: cw-var(--cw-TextField-error-labelColor);--_cw-field-supporting-color: cw-var(--cw-TextField-error-supportingTextColor);--_cw-field-trailing-color: cw-var(--cw-TextField-error-trailingIconColor)}.cw-TextField:where(.cw-TextField-error:has(>.cw-TextField-control:hover)){--_cw-field-indicator-color: cw-var(--cw-TextField-error-hoverIndicatorColor);--_cw-field-label-color: cw-var(--cw-TextField-error-hoverLabelColor);--_cw-field-trailing-color: cw-var(--cw-TextField-error-hoverTrailingIconColor)}.cw-TextField:where(.cw-TextField-error:has(.cw-TextField-input:focus)){--_cw-field-indicator-color: cw-var(--cw-TextField-error-indicatorColor);--_cw-field-label-color: cw-var(--cw-TextField-error-labelColor);--_cw-field-trailing-color: cw-var(--cw-TextField-error-trailingIconColor)}.cw-TextField:where(.cw-TextField-disabled){--_cw-field-affix-color: var(--_cw-field-disabled-content-color);--_cw-field-container-color: cw-scale-opacity( cw-var(--cw-TextField-disabled-containerColor), cw-var(--cw-TextField-disabled-containerOpacity) );--_cw-field-disabled-content-color: cw-scale-opacity( cw-var(--cw-TextField-disabled-contentColor), cw-var(--cw-TextField-disabled-contentOpacity) );--_cw-field-indicator-color: cw-scale-opacity( cw-var(--cw-TextField-disabled-indicatorColor), cw-var(--cw-TextField-disabled-indicatorOpacity) );--_cw-field-input-color: var(--_cw-field-disabled-content-color);--_cw-field-label-color: var(--_cw-field-disabled-content-color);--_cw-field-leading-color: var(--_cw-field-disabled-content-color);--_cw-field-placeholder-color: var(--_cw-field-disabled-content-color);--_cw-field-supporting-color: var(--_cw-field-disabled-content-color);--_cw-field-trailing-color: var(--_cw-field-disabled-content-color)}:is(.cw-TextField,.cw-Select){--_cw-field-direction: 1;--_cw-field-icon-box: 48px;--_cw-field-icon-gap: calc( var(--_cw-field-padding) - (var(--_cw-field-icon-box) - var(--_cw-field-icon-size)) / 2 );--_cw-field-icon-text-inset: calc(var(--_cw-field-icon-box) + var(--_cw-field-icon-gap));--_cw-field-label-end: 0px;--_cw-field-label-float-x: 0px;--_cw-field-label-float-y: calc(8px + cw-var(--cw-Typescale-body-small-lineHeight)/2) ;--_cw-field-label-floated-delay: cw-var(--cw-Motion-spring-spatial-fast-duration);--_cw-field-label-motion-opacity: calc( 1 - var(--_CW-FIELD-LABEL_FLOATED) - var(--_CW-FIELD-LABEL_RESTED) );--_cw-field-label-origin: var(--_cw-field-notch-padding) 50%;--_cw-field-label-rested-delay: 0s;--_cw-field-label-scale: .75;--_cw-field-label-start: 0px;--_CW-FIELD-LABEL_FLOATED: 1;--_CW-FIELD-LABEL_PROGRESS: 1;--_CW-FIELD-LABEL_RESTED: 0;--_cw-field-notch-padding: 4px;--_cw-field-notch-start: calc(var(--_cw-field-padding) - var(--_cw-field-notch-padding));--_cw-field-text-bottom: 16px;--_cw-field-text-top: 16px;box-sizing:border-box;display:inline-flex;flex-flow:column nowrap;gap:4px;max-inline-size:100%;min-inline-size:min(280px,100%);position:relative;transition-delay:var(--_cw-field-label-floated-delay),0s,var(--_cw-field-label-rested-delay);transition-duration:0s,cw-var(--cw-Motion-spring-spatial-fast-duration),0s;transition-property:--_CW-FIELD-LABEL_FLOATED,--_CW-FIELD-LABEL_PROGRESS,--_CW-FIELD-LABEL_RESTED;transition-timing-function:linear,cw-var(--cw-Motion-spring-spatial-fast-easing),linear;vertical-align:top}:is(.cw-TextField,.cw-Select):dir(rtl){--_cw-field-direction: -1;--_cw-field-label-origin: calc(100% - var(--_cw-field-notch-padding)) 50%}:is(.cw-TextField,.cw-Select):has(>*>:is(.cw-TextField-leading,.cw-Select-leading):not(:empty)){--_cw-field-label-start: calc(var(--_cw-field-icon-text-inset) - var(--_cw-field-padding))}:is(.cw-TextField,.cw-Select):has(>*>:is(.cw-TextField-trailing:not(:empty),.cw-TextField-reveal,.cw-Select-arrow)){--_cw-field-label-end: calc(var(--_cw-field-icon-text-inset) - var(--_cw-field-padding))}:is(._cw-TextField-filled,._cw-Select-filled):has(:is(.cw-TextField-labelText,.cw-Select-labelText):not(:empty)){--_cw-field-text-bottom: 8px;--_cw-field-text-top: calc(8px + cw-var(--cw-Typescale-body-small-lineHeight)) }:is(.cw-TextField-disabled,.cw-Select-disabled){cursor:default;pointer-events:none;user-select:none}:is(.cw-TextField-control,.cw-Select-control){-cw-typescale:--cw-Typescale-body-large;align-items:center;background-color:var(--_cw-field-container-color);border-radius:inherit;box-sizing:border-box;color:var(--_cw-field-input-color);isolation:isolate;min-block-size:var(--_cw-field-height);position:relative;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration),cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:background-color,color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing),cw-var(--cw-Motion-spring-effect-fast-easing)}:is(.cw-TextField-control,.cw-Select-control):before{background-color:currentcolor;border-radius:inherit;color:var(--_cw-field-state-layer-color);content:"";inset:0;opacity:var(--_cw-field-state-layer-opacity);pointer-events:none;position:absolute;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing);z-index:-3}:is(.cw-TextField-leading,.cw-TextField-trailing,.cw-Select-leading){--cw-Icon-size: var(--_cw-field-icon-size);align-items:center;display:flex;flex:none;font-size:var(--_cw-field-icon-size);justify-content:center;min-block-size:var(--_cw-field-icon-box);min-inline-size:var(--_cw-field-icon-box);transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}:is(.cw-TextField-leading,.cw-Select-leading){color:var(--_cw-field-leading-color)}:is(.cw-TextField-leading,.cw-TextField-trailing,.cw-Select-leading)>.cw-Icon{--cw-Icon-color: currentcolor;--cw-Icon-size: var(--_cw-field-icon-size)}:is(.cw-TextField-leading,.cw-TextField-trailing,.cw-Select-leading):empty{display:none}:is(.cw-TextField-outline,.cw-Select-outline){border-color:currentcolor;border-radius:inherit;border-style:solid;border-width:0 0 var(--_cw-field-indicator-thickness);box-sizing:border-box;color:var(--_cw-field-indicator-color);container-type:inline-size;inset:0;margin:0;min-inline-size:0;padding-block:0;padding-inline:var(--_cw-field-notch-start);pointer-events:none;position:absolute;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing);z-index:-1}:is(.cw-TextField-outline,.cw-Select-outline):after{border-color:currentcolor;border-radius:inherit;border-style:solid;border-width:0 0 var(--_cw-field-indicator-focus-thickness);box-sizing:border-box;content:"";inset:0 0 calc(-1 * var(--_cw-field-indicator-thickness));opacity:var(--_cw-field-indicator-focus-opacity);position:absolute;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:opacity;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}:is(.cw-TextField-legend,.cw-Select-legend){block-size:0;line-height:0;padding:0;position:relative;white-space:nowrap}:is(.cw-TextField-label,.cw-Select-label){-cw-typescale:--cw-Typescale-body-small;box-sizing:border-box;color:var(--_cw-field-label-color);display:inline-block;inset-block-start:8px;inset-inline-start:var(--_cw-field-label-start);max-inline-size:calc(100cqi - var(--_cw-field-label-end) - var(--_cw-field-label-start));opacity:var(--_CW-FIELD-LABEL_FLOATED);overflow:hidden;padding-inline:var(--_cw-field-notch-padding);pointer-events:none;position:relative;text-overflow:ellipsis;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing);vertical-align:top;white-space:nowrap}:is(.cw-TextField-restingLabel,.cw-TextField-restingMotion,.cw-TextField-floatingMotion,.cw-Select-restingLabel,.cw-Select-restingMotion,.cw-Select-floatingMotion){box-sizing:border-box;color:var(--_cw-field-label-color);inset-block-start:calc((var(--_cw-field-height) - 1lh) / 2);inset-inline-start:calc(var(--_cw-field-notch-start) + var(--_cw-field-label-start));max-inline-size:calc(100% - 2 * var(--_cw-field-notch-start) - var(--_cw-field-label-start) - var(--_cw-field-label-end));overflow:hidden;padding-inline:var(--_cw-field-notch-padding);pointer-events:none;position:absolute;text-overflow:ellipsis;transform-origin:var(--_cw-field-label-origin);transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing);white-space:nowrap;z-index:-2}:is(.cw-TextField-restingLabel,.cw-Select-restingLabel){-cw-typescale:--cw-Typescale-body-large;opacity:var(--_CW-FIELD-LABEL_RESTED)}:is(.cw-TextField-restingMotion,.cw-Select-restingMotion){-cw-typescale:--cw-Typescale-body-large;opacity:calc(var(--_cw-field-label-motion-opacity) * (1 - round(down,var(--_CW-FIELD-LABEL_PROGRESS) + .5,1)));transform:translate(calc(var(--_cw-field-direction) * var(--_cw-field-label-float-x) * var(--_CW-FIELD-LABEL_PROGRESS)),calc((var(--_cw-field-label-float-y) - var(--_cw-field-height) / 2) * var(--_CW-FIELD-LABEL_PROGRESS))) scale(calc(1 - (1 - var(--_cw-field-label-scale)) * var(--_CW-FIELD-LABEL_PROGRESS)))}:is(.cw-TextField-floatingMotion,.cw-Select-floatingMotion){-cw-typescale:--cw-Typescale-body-small;opacity:calc(var(--_cw-field-label-motion-opacity) * round(down,var(--_CW-FIELD-LABEL_PROGRESS) + .5,1));transform:translate(calc(var(--_cw-field-direction) * var(--_cw-field-label-float-x) * var(--_CW-FIELD-LABEL_PROGRESS)),calc((var(--_cw-field-label-float-y) - var(--_cw-field-height) / 2) * var(--_CW-FIELD-LABEL_PROGRESS))) scale(calc((1 - (1 - var(--_cw-field-label-scale)) * var(--_CW-FIELD-LABEL_PROGRESS)) / var(--_cw-field-label-scale)))}:is(.cw-TextField,.cw-Select):has(:is(.cw-TextField-labelText,.cw-Select-labelText):empty) :is(.cw-TextField-label,.cw-TextField-restingLabel,.cw-TextField-restingMotion,.cw-TextField-floatingMotion,.cw-Select-label,.cw-Select-restingLabel,.cw-Select-restingMotion,.cw-Select-floatingMotion){display:none}:is(.cw-TextField-asterisk,.cw-Select-asterisk){display:none}:is(._cw-TextField-outlined,._cw-Select-outlined){--_cw-field-label-float-x: calc(-1 * var(--_cw-field-label-start));--_cw-field-label-float-y: calc(var(--_cw-field-indicator-thickness) / 2);--_cw-field-label-text-top: calc( var(--_cw-field-height) / 2 + (var(--_cw-field-label-float-y) - var(--_cw-field-height) / 2) * var(--_CW-FIELD-LABEL_PROGRESS) - (1 - (1 - var(--_cw-field-label-scale)) * var(--_CW-FIELD-LABEL_PROGRESS)) * 1cap / 2 );--_cw-field-notch-inline-size: calc( var(--_cw-field-notch-opening) * ( (var(--_cw-field-label-inline-size) - 2 * var(--_cw-field-notch-padding)) * (1 - (1 - var(--_cw-field-label-scale)) * var(--_CW-FIELD-LABEL_PROGRESS)) / var(--_cw-field-label-scale) + 2 * var(--_cw-field-notch-padding) ) );--_cw-field-notch-opening: clamp( 0, round( up, tan(atan2( var(--_cw-field-indicator-focus-thickness) - var(--_cw-field-label-text-top), var(--_cw-field-indicator-focus-thickness) )), 1 ), 1 );--_cw-field-notch-overhang: 1px;:is(.cw-TextField-outline,.cw-Select-outline){border-width:var(--_cw-field-indicator-thickness);inset-block-start:calc(-1 * var(--_cw-field-notch-overhang));padding-inline:calc(var(--_cw-field-notch-start) - var(--_cw-field-indicator-thickness))}:is(.cw-TextField-legend,.cw-Select-legend){block-size:calc(var(--_cw-field-indicator-thickness) + 2 * var(--_cw-field-notch-overhang));inline-size:var(--_cw-field-notch-inline-size, auto);max-inline-size:var( --_cw-field-notch-inline-size, calc((1 - var(--_CW-FIELD-LABEL_RESTED)) * 100%) )}:is(.cw-TextField-outline,.cw-Select-outline):after{border-width:var(--_cw-field-indicator-focus-thickness);clip-path:polygon(0 0,var(--_cw-field-notch-start) 0,var(--_cw-field-notch-start) 50%,calc(100% - var(--_cw-field-notch-start)) 50%,calc(100% - var(--_cw-field-notch-start)) 0,100% 0,100% 100%,0 100%);inset:calc(-1 * var(--_cw-field-indicator-thickness));inset-block-start:calc(-1 * var(--_cw-field-indicator-thickness) - var(--_cw-field-notch-overhang))}:is(.cw-TextField-legend,.cw-Select-legend):after{border-block-start:var(--_cw-field-indicator-focus-thickness) solid currentcolor;content:"";inline-size:calc(100cqi - 100%);inset-block-start:var(--_cw-field-notch-overhang);inset-inline-start:100%;opacity:var(--_cw-field-indicator-focus-opacity);position:absolute;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:opacity;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}:is(.cw-TextField-label,.cw-Select-label){inset-block-start:calc(var(--_cw-field-notch-overhang) + var(--_cw-field-indicator-thickness) / 2 - .5lh);inset-inline-start:0}}:is(.cw-TextField-footer,.cw-Select-footer){-cw-typescale:--cw-Typescale-body-small;color:var(--_cw-field-supporting-color);display:flex;gap:var(--_cw-field-padding);padding-inline:var(--_cw-field-padding);transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}:is(.cw-TextField-footer,.cw-Select-footer):not(:has(>:not(:empty))){display:none}:is(.cw-TextField-supporting,.cw-Select-supporting){flex:1 1 auto;min-inline-size:0;overflow-wrap:anywhere}.cw-TextField-control{cursor:text;display:flex;padding-inline:var(--_cw-field-padding)}.cw-TextField-leading{margin-inline:calc(-1 * var(--_cw-field-padding)) var(--_cw-field-icon-gap)}.cw-TextField-trailing{color:var(--_cw-field-trailing-color);margin-inline:var(--_cw-field-icon-gap) calc(-1 * var(--_cw-field-padding))}.cw-TextField-field{align-items:stretch;display:flex;flex:1 1 auto;min-inline-size:0}.cw-TextField-input{appearance:none;background:transparent;block-size:auto;border:0;box-sizing:content-box;caret-color:var(--_cw-field-caret-color);color:inherit;flex:1 1 auto;font:inherit;inline-size:100%;letter-spacing:inherit;margin:0;min-inline-size:0;outline:none;padding:var(--_cw-field-text-top) 0 var(--_cw-field-text-bottom)}.cw-TextField-input:autofill{-webkit-text-fill-color:var(--_cw-field-input-color);background-clip:text}.cw-TextField-input::-webkit-datetime-edit-fields-wrapper{padding-block:0}textarea.cw-TextField-input{overflow-wrap:anywhere;resize:none}@supports (field-sizing: content){textarea.cw-TextField-input{field-sizing:content;min-block-size:calc(var(--_cw-TextField-rows, 1) * 1lh)}}.cw-TextField-input::placeholder{color:var(--_cw-field-placeholder-color);opacity:1;transition-duration:cw-var(--cw-Motion-spring-effect-slow-duration);transition-property:opacity;transition-timing-function:cw-var(--cw-Motion-spring-effect-slow-easing)}:is(.cw-TextField-prefix,.cw-TextField-suffix){color:var(--_cw-field-affix-color);flex:none;opacity:1;padding-block:var(--_cw-field-text-top) var(--_cw-field-text-bottom);transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration),cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color,opacity;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing),cw-var(--cw-Motion-spring-effect-fast-easing);white-space:nowrap}.cw-TextField-prefix{padding-inline-end:2px}.cw-TextField-suffix{padding-inline-start:2px}:is(.cw-TextField-prefix,.cw-TextField-suffix):empty{display:none}.cw-TextField:has(.cw-TextField-input:required):not(._cw-TextField-noAsterisk){.cw-TextField-asterisk{display:inline}}.cw-TextField:not(:has(.cw-TextField-input:is(:focus,:not(:placeholder-shown)))){--_cw-field-label-floated-delay: 0s;--_cw-field-label-rested-delay: cw-var(--cw-Motion-spring-spatial-fast-duration);--_CW-FIELD-LABEL_FLOATED: 0;--_CW-FIELD-LABEL_PROGRESS: 0;--_CW-FIELD-LABEL_RESTED: 1;&:has(.cw-TextField-labelText:not(:empty)) :is(.cw-TextField-prefix,.cw-TextField-suffix){opacity:0}&:has(.cw-TextField-labelText:not(:empty)) .cw-TextField-input::placeholder{opacity:0;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}}.cw-TextField-reveal{align-items:center;appearance:none;background:transparent;border:0;color:var(--_cw-field-trailing-color);cursor:pointer;display:flex;flex:none;font:inherit;justify-content:center;margin-block:0;margin-inline:var(--_cw-field-icon-gap) calc(-1 * var(--_cw-field-padding));min-block-size:var(--_cw-field-icon-box);min-inline-size:var(--_cw-field-icon-box);outline:none;padding:0;position:relative;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}.cw-TextField-reveal:has(+.cw-TextField-trailing:not(:empty)){margin-inline-end:0}.cw-TextField-reveal+.cw-TextField-trailing{margin-inline-start:0}.cw-TextField-reveal>.cw-Icon{--cw-Icon-color: currentcolor;--cw-Icon-size: var(--_cw-field-icon-size)}.cw-TextField-reveal:before{background-color:currentcolor;block-size:40px;border-radius:50%;color:transparent;content:"";inline-size:40px;opacity:cw-var(--cw-State-layer-hoverOpacity);outline:0 solid cw-var(--cw-Color-secondary-fill);outline-offset:cw-var(--cw-State-focusIndicator-outerOffset);position:absolute;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}.cw-TextField-reveal:hover:before{color:var(--_cw-field-trailing-color)}.cw-TextField-reveal:is(:focus-visible,:active):before{color:var(--_cw-field-trailing-color);opacity:cw-var(--cw-State-layer-pressOpacity)}.cw-TextField-reveal:focus-visible:before{opacity:cw-var(--cw-State-layer-focusOpacity);outline-width:cw-var(--cw-State-focusIndicator-thickness)}.cw-TextField-counter{margin-inline-start:auto;white-space:nowrap}.cw-Autocomplete-menu{--cw-elevationShadow-color: var(--_cw-field-menu-shadow-color);--cw-elevationShadow-level: var(--_cw-field-menu-elevation);background-color:var(--_cw-field-menu-color);border:0;border-radius:var(--_cw-field-menu-shape);box-sizing:border-box;color:var(--_cw-field-menu-item-label-color);inset:auto;margin:0;opacity:0;overflow:hidden auto;overscroll-behavior:contain;padding:8px 0;position:fixed;transform:scale(.8);transition-behavior:allow-discrete;transition-duration:cw-var(--cw-Motion-spring-spatial-fast-duration),cw-var(--cw-Motion-spring-effect-fast-duration),cw-var(--cw-Motion-spring-spatial-fast-duration),cw-var(--cw-Motion-spring-spatial-fast-duration);transition-property:display,opacity,overlay,transform;transition-timing-function:cw-var(--cw-Motion-spring-spatial-fast-easing),cw-var(--cw-Motion-spring-effect-fast-easing),cw-var(--cw-Motion-spring-spatial-fast-easing),cw-var(--cw-Motion-spring-spatial-fast-easing)}.cw-Autocomplete-menu:popover-open{opacity:1;transform:none}@starting-style{.cw-Autocomplete-menu:popover-open{opacity:0;transform:scale(.8)}}.cw-Autocomplete-option{-cw-typescale:--cw-Typescale-label-large;align-items:center;box-sizing:border-box;cursor:pointer;display:flex;min-block-size:var(--_cw-field-menu-item-height);padding-inline:var(--_cw-field-menu-item-padding);position:relative;user-select:none}.cw-Autocomplete-option:before{background-color:currentcolor;color:transparent;content:"";inset:0;opacity:cw-var(--cw-State-layer-hoverOpacity);pointer-events:none;position:absolute;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}.cw-Autocomplete-option:hover:before{color:var(--_cw-field-menu-item-state-layer-color)}.cw-Autocomplete-option[aria-selected=true]:before{color:var(--_cw-field-menu-item-state-layer-color);opacity:cw-var(--cw-State-layer-focusOpacity)}.cw-Autocomplete-option:active:before{opacity:cw-var(--cw-State-layer-pressOpacity)}}@layer cw-theme{._cw-TextField-outlined{@cw-apply-theme outlined,cw-TextField;}}
|
|
1
|
+
@cw-attribute-roles cw-TextField;@property --_CW-FIELD-LABEL_PROGRESS{syntax: "<number>"; inherits: true; initial-value: 1;}@property --_CW-FIELD-LABEL_FLOATED{syntax: "<number>"; inherits: true; initial-value: 1;}@property --_CW-FIELD-LABEL_RESTED{syntax: "<number>"; inherits: true; initial-value: 0;}@property --_cw-TextField-slash{syntax: "<number>"; inherits: true; initial-value: -816;}@layer cw-style{.cw-TextField{--_cw-field-affix-color: cw-var(--cw-TextField-input-affixColor);--_cw-field-caret-color: cw-var(--cw-TextField-input-caretColor);--_cw-field-container-color: cw-var(--cw-TextField-container-color);--_cw-field-height: cw-var(--cw-TextField-container-height);--_cw-field-icon-size: cw-var(--cw-TextField-icon-size);--_cw-field-indicator-color: cw-var(--cw-TextField-indicator-color);--_cw-field-indicator-focus-opacity: 0;--_cw-field-indicator-focus-thickness: cw-var(--cw-TextField-focus-indicatorThickness);--_cw-field-indicator-thickness: cw-var(--cw-TextField-indicator-thickness);--_cw-field-input-color: cw-var(--cw-TextField-input-color);--_cw-field-label-color: cw-var(--cw-TextField-label-color);--_cw-field-leading-color: cw-var(--cw-TextField-icon-leadingColor);--_cw-field-menu-color: cw-var(--cw-TextField-menu-color);--_cw-field-menu-elevation: cw-var(--cw-TextField-menu-elevation);--_cw-field-menu-item-height: cw-var(--cw-TextField-menu-itemHeight);--_cw-field-menu-item-label-color: cw-var(--cw-TextField-menu-itemLabelColor);--_cw-field-menu-item-padding: cw-var(--cw-TextField-menu-itemPadding);--_cw-field-menu-item-state-layer-color: cw-var(--cw-TextField-menu-itemStateLayerColor);--_cw-field-menu-shadow-color: cw-var(--cw-TextField-menu-shadowColor);--_cw-field-menu-shape: cw-var(--cw-TextField-menu-shape);--_cw-field-padding: cw-var(--cw-TextField-container-padding);--_cw-field-placeholder-color: cw-var(--cw-TextField-input-placeholderColor);--_cw-field-state-layer-color: transparent;--_cw-field-state-layer-opacity: cw-var(--cw-TextField-hover-stateLayerOpacity);--_cw-field-supporting-color: cw-var(--cw-TextField-supportingText-color);--_cw-field-trailing-color: cw-var(--cw-TextField-icon-trailingColor);-cw-border-radius:--cw-TextField-container-shape}.cw-TextField:where(:has(>.cw-TextField-control:hover)){--_cw-field-indicator-color: cw-var(--cw-TextField-hover-indicatorColor);--_cw-field-label-color: cw-var(--cw-TextField-hover-labelColor);--_cw-field-state-layer-color: cw-var(--cw-TextField-hover-stateLayerColor)}.cw-TextField:where(:has(.cw-TextField-input:focus)){--_cw-field-indicator-color: cw-var(--cw-TextField-focus-indicatorColor);--_cw-field-indicator-focus-opacity: 1;--_cw-field-label-color: cw-var(--cw-TextField-focus-labelColor);--_cw-field-trailing-color: cw-var(--cw-TextField-focus-trailingIconColor)}.cw-TextField:where(.cw-TextField-error){--_cw-field-caret-color: cw-var(--cw-TextField-error-caretColor);--_cw-field-indicator-color: cw-var(--cw-TextField-error-indicatorColor);--_cw-field-label-color: cw-var(--cw-TextField-error-labelColor);--_cw-field-supporting-color: cw-var(--cw-TextField-error-supportingTextColor);--_cw-field-trailing-color: cw-var(--cw-TextField-error-trailingIconColor)}.cw-TextField:where(.cw-TextField-error:has(>.cw-TextField-control:hover)){--_cw-field-indicator-color: cw-var(--cw-TextField-error-hoverIndicatorColor);--_cw-field-label-color: cw-var(--cw-TextField-error-hoverLabelColor);--_cw-field-trailing-color: cw-var(--cw-TextField-error-hoverTrailingIconColor)}.cw-TextField:where(.cw-TextField-error:has(.cw-TextField-input:focus)){--_cw-field-indicator-color: cw-var(--cw-TextField-error-indicatorColor);--_cw-field-label-color: cw-var(--cw-TextField-error-labelColor);--_cw-field-trailing-color: cw-var(--cw-TextField-error-trailingIconColor)}.cw-TextField:where(.cw-TextField-disabled){--_cw-field-affix-color: var(--_cw-field-disabled-content-color);--_cw-field-container-color: cw-scale-opacity( cw-var(--cw-TextField-disabled-containerColor), cw-var(--cw-TextField-disabled-containerOpacity) );--_cw-field-disabled-content-color: cw-scale-opacity( cw-var(--cw-TextField-disabled-contentColor), cw-var(--cw-TextField-disabled-contentOpacity) );--_cw-field-disabled-content-opacity: cw-var(--cw-TextField-disabled-contentOpacity);--_cw-field-disabled-reveal-color: cw-var(--cw-TextField-disabled-contentColor);--_cw-field-indicator-color: cw-scale-opacity( cw-var(--cw-TextField-disabled-indicatorColor), cw-var(--cw-TextField-disabled-indicatorOpacity) );--_cw-field-input-color: var(--_cw-field-disabled-content-color);--_cw-field-label-color: var(--_cw-field-disabled-content-color);--_cw-field-leading-color: var(--_cw-field-disabled-content-color);--_cw-field-placeholder-color: var(--_cw-field-disabled-content-color);--_cw-field-supporting-color: var(--_cw-field-disabled-content-color);--_cw-field-trailing-color: var(--_cw-field-disabled-content-color)}:is(.cw-TextField,.cw-Select){--_cw-field-direction: 1;--_cw-field-icon-box: 48px;--_cw-field-icon-gap: calc( var(--_cw-field-padding) - (var(--_cw-field-icon-box) - var(--_cw-field-icon-size)) / 2 );--_cw-field-icon-text-inset: calc(var(--_cw-field-icon-box) + var(--_cw-field-icon-gap));--_cw-field-label-end: 0px;--_cw-field-label-float-x: 0px;--_cw-field-label-float-y: calc(8px + cw-var(--cw-Typescale-body-small-lineHeight)/2) ;--_cw-field-label-floated-delay: cw-var(--cw-Motion-spring-spatial-fast-duration);--_cw-field-label-motion-opacity: calc( 1 - var(--_CW-FIELD-LABEL_FLOATED) - var(--_CW-FIELD-LABEL_RESTED) );--_cw-field-label-origin: var(--_cw-field-notch-padding) 50%;--_cw-field-label-rested-delay: 0s;--_cw-field-label-scale: .75;--_cw-field-label-start: 0px;--_CW-FIELD-LABEL_FLOATED: 1;--_CW-FIELD-LABEL_PROGRESS: 1;--_CW-FIELD-LABEL_RESTED: 0;--_cw-field-notch-padding: 4px;--_cw-field-notch-start: calc(var(--_cw-field-padding) - var(--_cw-field-notch-padding));--_cw-field-text-bottom: 16px;--_cw-field-text-top: 16px;box-sizing:border-box;display:inline-flex;flex-flow:column nowrap;gap:4px;max-inline-size:100%;min-inline-size:min(280px,100%);position:relative;transition-delay:var(--_cw-field-label-floated-delay),0s,var(--_cw-field-label-rested-delay);transition-duration:0s,cw-var(--cw-Motion-spring-spatial-fast-duration),0s;transition-property:--_CW-FIELD-LABEL_FLOATED,--_CW-FIELD-LABEL_PROGRESS,--_CW-FIELD-LABEL_RESTED;transition-timing-function:linear,cw-var(--cw-Motion-spring-spatial-fast-easing),linear;vertical-align:top}:is(.cw-TextField,.cw-Select):dir(rtl){--_cw-field-direction: -1;--_cw-field-label-origin: calc(100% - var(--_cw-field-notch-padding)) 50%}:is(.cw-TextField,.cw-Select):has(>*>:is(.cw-TextField-leading,.cw-Select-leading):not(:empty)){--_cw-field-label-start: calc(var(--_cw-field-icon-text-inset) - var(--_cw-field-padding))}:is(.cw-TextField,.cw-Select):has(>*>:is(.cw-TextField-trailing:not(:empty),.cw-TextField-reveal,.cw-Select-arrow)){--_cw-field-label-end: calc(var(--_cw-field-icon-text-inset) - var(--_cw-field-padding))}:is(._cw-TextField-filled,._cw-Select-filled):has(:is(.cw-TextField-labelText,.cw-Select-labelText):not(:empty)){--_cw-field-text-bottom: 8px;--_cw-field-text-top: calc(8px + cw-var(--cw-Typescale-body-small-lineHeight)) }:is(.cw-TextField-disabled,.cw-Select-disabled){cursor:default;pointer-events:none;user-select:none}:is(.cw-TextField-control,.cw-Select-control){-cw-typescale:--cw-Typescale-body-large;align-items:center;background-color:var(--_cw-field-container-color);border-radius:inherit;box-sizing:border-box;color:var(--_cw-field-input-color);isolation:isolate;min-block-size:var(--_cw-field-height);position:relative;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration),cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:background-color,color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing),cw-var(--cw-Motion-spring-effect-fast-easing)}:is(.cw-TextField-control,.cw-Select-control):before{background-color:currentcolor;border-radius:inherit;color:var(--_cw-field-state-layer-color);content:"";inset:0;opacity:var(--_cw-field-state-layer-opacity);pointer-events:none;position:absolute;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing);z-index:-3}:is(.cw-TextField-leading,.cw-TextField-trailing,.cw-Select-leading){--cw-Icon-size: var(--_cw-field-icon-size);align-items:center;display:flex;flex:none;font-size:var(--_cw-field-icon-size);justify-content:center;min-block-size:var(--_cw-field-icon-box);min-inline-size:var(--_cw-field-icon-box);transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}:is(.cw-TextField-leading,.cw-Select-leading){color:var(--_cw-field-leading-color)}:is(.cw-TextField-leading,.cw-TextField-trailing,.cw-Select-leading)>.cw-Icon{--cw-Icon-color: currentcolor;--cw-Icon-size: var(--_cw-field-icon-size)}:is(.cw-TextField-leading,.cw-TextField-trailing,.cw-Select-leading):empty{display:none}:is(.cw-TextField-outline,.cw-Select-outline){border-color:currentcolor;border-radius:inherit;border-style:solid;border-width:0 0 var(--_cw-field-indicator-thickness);box-sizing:border-box;color:var(--_cw-field-indicator-color);container-type:inline-size;inset:0;margin:0;min-inline-size:0;padding-block:0;padding-inline:var(--_cw-field-notch-start);pointer-events:none;position:absolute;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing);z-index:-1}:is(.cw-TextField-outline,.cw-Select-outline):after{border-color:currentcolor;border-radius:inherit;border-style:solid;border-width:0 0 var(--_cw-field-indicator-focus-thickness);box-sizing:border-box;content:"";inset:0 0 calc(-1 * var(--_cw-field-indicator-thickness));opacity:var(--_cw-field-indicator-focus-opacity);position:absolute;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:opacity;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}:is(.cw-TextField-legend,.cw-Select-legend){block-size:0;line-height:0;padding:0;position:relative;white-space:nowrap}:is(.cw-TextField-label,.cw-Select-label){-cw-typescale:--cw-Typescale-body-small;box-sizing:border-box;color:var(--_cw-field-label-color);display:inline-block;inset-block-start:8px;inset-inline-start:var(--_cw-field-label-start);max-inline-size:calc(100cqi - var(--_cw-field-label-end) - var(--_cw-field-label-start));opacity:var(--_CW-FIELD-LABEL_FLOATED);overflow:hidden;padding-inline:var(--_cw-field-notch-padding);pointer-events:none;position:relative;text-overflow:ellipsis;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing);vertical-align:top;white-space:nowrap}:is(.cw-TextField-restingLabel,.cw-TextField-restingMotion,.cw-TextField-floatingMotion,.cw-Select-restingLabel,.cw-Select-restingMotion,.cw-Select-floatingMotion){box-sizing:border-box;color:var(--_cw-field-label-color);inset-block-start:calc((var(--_cw-field-height) - 1lh) / 2);inset-inline-start:calc(var(--_cw-field-notch-start) + var(--_cw-field-label-start));max-inline-size:calc(100% - 2 * var(--_cw-field-notch-start) - var(--_cw-field-label-start) - var(--_cw-field-label-end));overflow:hidden;padding-inline:var(--_cw-field-notch-padding);pointer-events:none;position:absolute;text-overflow:ellipsis;transform-origin:var(--_cw-field-label-origin);transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing);white-space:nowrap;z-index:-2}:is(.cw-TextField-restingLabel,.cw-Select-restingLabel){-cw-typescale:--cw-Typescale-body-large;opacity:var(--_CW-FIELD-LABEL_RESTED)}:is(.cw-TextField-restingMotion,.cw-Select-restingMotion){-cw-typescale:--cw-Typescale-body-large;opacity:calc(var(--_cw-field-label-motion-opacity) * (1 - round(down,var(--_CW-FIELD-LABEL_PROGRESS) + .5,1)));transform:translate(calc(var(--_cw-field-direction) * var(--_cw-field-label-float-x) * var(--_CW-FIELD-LABEL_PROGRESS)),calc((var(--_cw-field-label-float-y) - var(--_cw-field-height) / 2) * var(--_CW-FIELD-LABEL_PROGRESS))) scale(calc(1 - (1 - var(--_cw-field-label-scale)) * var(--_CW-FIELD-LABEL_PROGRESS)))}:is(.cw-TextField-floatingMotion,.cw-Select-floatingMotion){-cw-typescale:--cw-Typescale-body-small;opacity:calc(var(--_cw-field-label-motion-opacity) * round(down,var(--_CW-FIELD-LABEL_PROGRESS) + .5,1));transform:translate(calc(var(--_cw-field-direction) * var(--_cw-field-label-float-x) * var(--_CW-FIELD-LABEL_PROGRESS)),calc((var(--_cw-field-label-float-y) - var(--_cw-field-height) / 2) * var(--_CW-FIELD-LABEL_PROGRESS))) scale(calc((1 - (1 - var(--_cw-field-label-scale)) * var(--_CW-FIELD-LABEL_PROGRESS)) / var(--_cw-field-label-scale)))}:is(.cw-TextField,.cw-Select):has(:is(.cw-TextField-labelText,.cw-Select-labelText):empty) :is(.cw-TextField-label,.cw-TextField-restingLabel,.cw-TextField-restingMotion,.cw-TextField-floatingMotion,.cw-Select-label,.cw-Select-restingLabel,.cw-Select-restingMotion,.cw-Select-floatingMotion){display:none}:is(.cw-TextField-asterisk,.cw-Select-asterisk){display:none}:is(._cw-TextField-outlined,._cw-Select-outlined){--_cw-field-label-float-x: calc(-1 * var(--_cw-field-label-start));--_cw-field-label-float-y: calc(var(--_cw-field-indicator-thickness) / 2);--_cw-field-label-text-top: calc( var(--_cw-field-height) / 2 + (var(--_cw-field-label-float-y) - var(--_cw-field-height) / 2) * var(--_CW-FIELD-LABEL_PROGRESS) - (1 - (1 - var(--_cw-field-label-scale)) * var(--_CW-FIELD-LABEL_PROGRESS)) * 1cap / 2 );--_cw-field-notch-inline-size: clamp( 0px, (var(--_cw-field-indicator-focus-thickness) - var(--_cw-field-label-text-top)) * 1000000, (var(--_cw-field-label-inline-size) - 2 * var(--_cw-field-notch-padding)) * (1 - (1 - var(--_cw-field-label-scale)) * var(--_CW-FIELD-LABEL_PROGRESS)) / var(--_cw-field-label-scale) + 2 * var(--_cw-field-notch-padding) );--_cw-field-notch-overhang: 1px;:is(.cw-TextField-outline,.cw-Select-outline){border-width:var(--_cw-field-indicator-thickness);inset-block-start:calc(-1 * var(--_cw-field-notch-overhang));padding-inline:calc(var(--_cw-field-notch-start) - var(--_cw-field-indicator-thickness))}:is(.cw-TextField-legend,.cw-Select-legend){block-size:calc(var(--_cw-field-indicator-thickness) + 2 * var(--_cw-field-notch-overhang));inline-size:var(--_cw-field-notch-inline-size, auto);max-inline-size:var( --_cw-field-notch-inline-size, calc((1 - var(--_CW-FIELD-LABEL_RESTED)) * 100%) )}:is(.cw-TextField-outline,.cw-Select-outline):after{border-width:var(--_cw-field-indicator-focus-thickness);clip-path:polygon(0 0,var(--_cw-field-notch-start) 0,var(--_cw-field-notch-start) 50%,calc(100% - var(--_cw-field-notch-start)) 50%,calc(100% - var(--_cw-field-notch-start)) 0,100% 0,100% 100%,0 100%);inset:calc(-1 * var(--_cw-field-indicator-thickness));inset-block-start:calc(-1 * var(--_cw-field-indicator-thickness) - var(--_cw-field-notch-overhang))}:is(.cw-TextField-legend,.cw-Select-legend):after{border-block-start:var(--_cw-field-indicator-focus-thickness) solid currentcolor;content:"";inline-size:calc(100cqi - 100%);inset-block-start:var(--_cw-field-notch-overhang);inset-inline-start:100%;opacity:var(--_cw-field-indicator-focus-opacity);position:absolute;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:opacity;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}:is(.cw-TextField-label,.cw-Select-label){inset-block-start:calc(var(--_cw-field-notch-overhang) + var(--_cw-field-indicator-thickness) / 2 - .5lh);inset-inline-start:0}}:is(.cw-TextField-footer,.cw-Select-footer){-cw-typescale:--cw-Typescale-body-small;color:var(--_cw-field-supporting-color);display:flex;gap:var(--_cw-field-padding);padding-inline:var(--_cw-field-padding);transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}:is(.cw-TextField-footer,.cw-Select-footer):not(:has(>:not(:empty))){display:none}:is(.cw-TextField-supporting,.cw-Select-supporting){flex:1 1 auto;min-inline-size:0;overflow-wrap:anywhere}.cw-TextField-control{cursor:text;display:flex;padding-inline:var(--_cw-field-padding)}.cw-TextField-leading{margin-inline:calc(-1 * var(--_cw-field-padding)) var(--_cw-field-icon-gap)}.cw-TextField-trailing{color:var(--_cw-field-trailing-color);margin-inline:var(--_cw-field-icon-gap) calc(-1 * var(--_cw-field-padding))}.cw-TextField-field{align-items:stretch;display:flex;flex:1 1 auto;min-inline-size:0}.cw-TextField-input{appearance:none;background:transparent;block-size:auto;border:0;box-sizing:content-box;caret-color:var(--_cw-field-caret-color);color:inherit;flex:1 1 auto;font:inherit;inline-size:100%;letter-spacing:inherit;margin:0;min-inline-size:0;outline:none;padding:var(--_cw-field-text-top) 0 var(--_cw-field-text-bottom)}.cw-TextField-input:autofill{-webkit-text-fill-color:var(--_cw-field-input-color);background-clip:text}.cw-TextField-input::-webkit-datetime-edit-fields-wrapper{padding-block:0}textarea.cw-TextField-input{overflow-wrap:anywhere;resize:none}@supports (field-sizing: content){textarea.cw-TextField-input{field-sizing:content;min-block-size:calc(var(--_cw-TextField-rows, 1) * 1lh)}}.cw-TextField-input::placeholder{color:var(--_cw-field-placeholder-color);opacity:1;transition-duration:cw-var(--cw-Motion-spring-effect-slow-duration);transition-property:opacity;transition-timing-function:cw-var(--cw-Motion-spring-effect-slow-easing)}:is(.cw-TextField-prefix,.cw-TextField-suffix){color:var(--_cw-field-affix-color);flex:none;opacity:1;padding-block:var(--_cw-field-text-top) var(--_cw-field-text-bottom);transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration),cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color,opacity;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing),cw-var(--cw-Motion-spring-effect-fast-easing);white-space:nowrap}.cw-TextField-prefix{padding-inline-end:2px}.cw-TextField-suffix{padding-inline-start:2px}:is(.cw-TextField-prefix,.cw-TextField-suffix):empty{display:none}.cw-TextField:has(.cw-TextField-input:required):not(._cw-TextField-noAsterisk){.cw-TextField-asterisk{display:inline}}.cw-TextField:not(:has(.cw-TextField-input:is(:focus,:not(:placeholder-shown)))){--_cw-field-label-floated-delay: 0s;--_cw-field-label-rested-delay: cw-var(--cw-Motion-spring-spatial-fast-duration);--_CW-FIELD-LABEL_FLOATED: 0;--_CW-FIELD-LABEL_PROGRESS: 0;--_CW-FIELD-LABEL_RESTED: 1;&:has(.cw-TextField-labelText:not(:empty)) :is(.cw-TextField-prefix,.cw-TextField-suffix){opacity:0}&:has(.cw-TextField-labelText:not(:empty)) .cw-TextField-input::placeholder{opacity:0;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}}.cw-TextField-reveal{align-items:center;appearance:none;background:transparent;border:0;color:var(--_cw-field-trailing-color);cursor:pointer;display:flex;flex:none;font:inherit;justify-content:center;margin-block:0;margin-inline:var(--_cw-field-icon-gap) calc(-1 * var(--_cw-field-padding));min-block-size:var(--_cw-field-icon-box);min-inline-size:var(--_cw-field-icon-box);outline:none;padding:0;position:relative;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:--_cw-TextField-slash,color,opacity;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}.cw-TextField-reveal[aria-pressed=true]{--_cw-TextField-slash: 816}@media (forced-colors: none){.cw-TextField-reveal:disabled{color:var(--_cw-field-disabled-reveal-color);opacity:var(--_cw-field-disabled-content-opacity)}}.cw-TextField-reveal:has(+.cw-TextField-trailing:not(:empty)){margin-inline-end:0}.cw-TextField-reveal+.cw-TextField-trailing{margin-inline-start:0}.cw-TextField-reveal>.cw-Icon{--cw-Icon-color: currentcolor;--cw-Icon-size: var(--_cw-field-icon-size)}._cw-TextField-revealEye{clip-path:polygon(evenodd,0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,3.75% 11.25%,calc((1072 - 816) * 100% / 1920) calc(100% - (1072 + 816) * 100% / 1920),calc((1072 + var(--_cw-TextField-slash)) * 100% / 1920) calc(100% - (1072 - var(--_cw-TextField-slash)) * 100% / 1920),calc((888 + var(--_cw-TextField-slash)) * 100% / 1920) calc(100% - (888 - var(--_cw-TextField-slash)) * 100% / 1920),3.75% 11.25%)}._cw-TextField-revealSlash{clip-path:polygon(calc((808 - 816) * 100% / 1920) calc(100% - (808 + 816) * 100% / 1920),calc((808 + min(-137,var(--_cw-TextField-slash))) * 100% / 1920) calc(100% - (808 - min(-137,var(--_cw-TextField-slash))) * 100% / 1920),calc((848 + min(-137,var(--_cw-TextField-slash))) * 100% / 1920) calc(100% - (848 - min(-137,var(--_cw-TextField-slash))) * 100% / 1920),calc((848 + min(97,var(--_cw-TextField-slash))) * 100% / 1920) calc(100% - (848 - min(97,var(--_cw-TextField-slash))) * 100% / 1920),calc((808 + min(97,var(--_cw-TextField-slash))) * 100% / 1920) calc(100% - (808 - min(97,var(--_cw-TextField-slash))) * 100% / 1920),calc((808 + var(--_cw-TextField-slash)) * 100% / 1920) calc(100% - (808 - var(--_cw-TextField-slash)) * 100% / 1920),calc((1016 + var(--_cw-TextField-slash)) * 100% / 1920) calc(100% - (1016 - var(--_cw-TextField-slash)) * 100% / 1920),calc((1016 - 816) * 100% / 1920) calc(100% - (1016 + 816) * 100% / 1920));position:absolute}.cw-TextField-reveal:before{background-color:currentcolor;block-size:40px;border-radius:50%;color:transparent;content:"";inline-size:40px;opacity:cw-var(--cw-State-layer-hoverOpacity);outline:0 solid cw-var(--cw-Color-secondary-fill);outline-offset:cw-var(--cw-State-focusIndicator-outerOffset);position:absolute;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}.cw-TextField-reveal:hover:before{color:var(--_cw-field-trailing-color)}.cw-TextField-reveal:is(:focus-visible,:active):before{color:var(--_cw-field-trailing-color);opacity:cw-var(--cw-State-layer-pressOpacity)}.cw-TextField-reveal:focus-visible:before{opacity:cw-var(--cw-State-layer-focusOpacity);outline-width:cw-var(--cw-State-focusIndicator-thickness)}.cw-TextField-counter{margin-inline-start:auto;white-space:nowrap}.cw-Autocomplete-menu{--cw-elevationShadow-color: var(--_cw-field-menu-shadow-color);--cw-elevationShadow-level: var(--_cw-field-menu-elevation);background-color:var(--_cw-field-menu-color);border:0;border-radius:var(--_cw-field-menu-shape);box-sizing:border-box;color:var(--_cw-field-menu-item-label-color);inset:auto;margin:0;opacity:0;overflow:hidden auto;overscroll-behavior:contain;padding:8px 0;position:fixed;transform:scale(.8);transition-behavior:allow-discrete;transition-duration:cw-var(--cw-Motion-spring-spatial-fast-duration),cw-var(--cw-Motion-spring-effect-fast-duration),cw-var(--cw-Motion-spring-spatial-fast-duration),cw-var(--cw-Motion-spring-spatial-fast-duration);transition-property:display,opacity,overlay,transform;transition-timing-function:cw-var(--cw-Motion-spring-spatial-fast-easing),cw-var(--cw-Motion-spring-effect-fast-easing),cw-var(--cw-Motion-spring-spatial-fast-easing),cw-var(--cw-Motion-spring-spatial-fast-easing)}.cw-Autocomplete-menu:popover-open{opacity:1;transform:none}@starting-style{.cw-Autocomplete-menu:popover-open{opacity:0;transform:scale(.8)}}.cw-Autocomplete-option{-cw-typescale:--cw-Typescale-label-large;align-items:center;box-sizing:border-box;cursor:pointer;display:flex;min-block-size:var(--_cw-field-menu-item-height);padding-inline:var(--_cw-field-menu-item-padding);position:relative;user-select:none}.cw-Autocomplete-option:before{background-color:currentcolor;color:transparent;content:"";inset:0;opacity:cw-var(--cw-State-layer-hoverOpacity);pointer-events:none;position:absolute;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}.cw-Autocomplete-option:hover:before{color:var(--_cw-field-menu-item-state-layer-color)}.cw-Autocomplete-option[aria-selected=true]:before{color:var(--_cw-field-menu-item-state-layer-color);opacity:cw-var(--cw-State-layer-focusOpacity)}.cw-Autocomplete-option:active:before{opacity:cw-var(--cw-State-layer-pressOpacity)}}@layer cw-theme{._cw-TextField-outlined{@cw-apply-theme outlined,cw-TextField;}}
|
|
@@ -1,38 +1,44 @@
|
|
|
1
|
-
import{createMemo as
|
|
1
|
+
import{createMemo as w,createUniqueId as p,mergeProps as I,onCleanup as N,onMount as ee,untrack as o}from"solid-js";import{defineDomComponent as te}from"..";import{DomController as ne}from"../dom/client";import{Icon as T}from"../icon";import{createFieldLabel as J,firstInputSlotOf as c,idReferencesOf as P,inputErrorOf as q,observeFormReset as ie,observeLabelInlineSize as se,splitInputElementProps as re,supportingSlotOf as B}from"./base";import"./text-field.css";const m="cw-TextField",z="cw-TextField-disabled",$="cw-TextField-error",Y="cw-TextField-readOnly",U="_cw-TextField-noAsterisk",y="cw-TextField-input",W=" ",j="Show password",K="visibility",G="visibility_off",Q="--_cw-TextField-rows",de="a[href], button, input, select, textarea, [contenteditable], [tabindex]";let V;function le(){return V??=typeof CSS<"u"&&CSS.supports("field-sizing","content"),V}function Z(i){return`_cw-TextField-${i??"filled"}`}function E(i){const{multiline:e,revealPassword:t,secure:n,type:s}=i;return e===!0||t===!1?!1:t===!0||n===!0||s==="password"}function L(i,e){const t=i.type??(i.secure===!0?"password":"text");return e&&E(i)?"text":t}function A(i,e){return e===void 0||e<=0?void 0:`${i} / ${e}`}function X(i){return i.localName==="textarea"}function ae(i){return typeof i=="function"?i():i}function oe(i,e,t){const n=p(),s=p(),r=p(),l=q(e),u=B(e,l),a=t?.(),f=re(i),{containerProps:h,elementProps:d}=f,k=e.invalid===!0||l!==void 0,S=("value"in e?e.value:e.defaultValue)??"",O=A(S.length,e.maxLength),F=e.disabled===!0,M=e.readOnly===!0,C=e.id??d.id??n,R={...d,"aria-describedby":P(d["aria-describedby"],u===void 0?void 0:s,O===void 0?void 0:r),"aria-invalid":"aria-invalid"in d?d["aria-invalid"]:k?"true":void 0,class:y,disabled:F,id:C,maxLength:e.maxLength,minLength:e.minLength,name:e.name,placeholder:e.placeholder??W,readOnly:M||void 0,required:e.required===!0,spellcheck:e.spellCheck},D=e.multiline===!0,H=J(m);return<div{...h}classList={{...h.classList,[Z(e.variant)]:!0,[z]:F,[$]:k,[U]:e.noAsterisk===!0,[Y]:M,[m]:!0,...a===void 0?void 0:{[a.className]:!0}}}style={D?{...h.style,[Q]:`${e.rows??1}`}:h.style}>
|
|
2
2
|
<div class="cw-TextField-control">
|
|
3
3
|
<span class="cw-TextField-leading">
|
|
4
4
|
{c(()=>e.leading,()=>e.leadingIcon)}
|
|
5
5
|
</span>
|
|
6
6
|
<span class="cw-TextField-field">
|
|
7
7
|
<span class="cw-TextField-prefix">{e.prefix}</span>
|
|
8
|
-
{
|
|
8
|
+
{D?<textarea{...R}cols={e.cols}rows={e.rows??1}>{S}</textarea>:<input{...R}autocomplete={e.autocomplete}inputMode={e.inputMode}max={e.max}min={e.min}pattern={e.pattern}step={e.step}type={L(e,!1)}value={S}{...a?.controlAttributes}/>}
|
|
9
9
|
<span class="cw-TextField-suffix">{e.suffix}</span>
|
|
10
10
|
</span>
|
|
11
|
-
{
|
|
11
|
+
{E(e)?<button aria-controls={C}aria-label={e.revealPasswordLabel??j}aria-pressed="false"class="cw-TextField-reveal"disabled={F}type="button">
|
|
12
|
+
<T class="_cw-TextField-revealEye"name={K}/>
|
|
13
|
+
<T class="_cw-TextField-revealSlash"name={G}/>
|
|
14
|
+
</button>:void 0}
|
|
12
15
|
<span class="cw-TextField-trailing">
|
|
13
16
|
{c(()=>e.trailing,()=>e.trailingIcon)}
|
|
14
17
|
</span>
|
|
15
18
|
<fieldset class="cw-TextField-outline"role="presentation">
|
|
16
19
|
<legend class="cw-TextField-legend">
|
|
17
20
|
<span class="cw-TextField-label">
|
|
18
|
-
<label class="cw-TextField-labelText"for={
|
|
19
|
-
{
|
|
21
|
+
<label class="cw-TextField-labelText"for={C}id={a?.labelId}>
|
|
22
|
+
{H.content(c(()=>e.label,()=>f.children))}
|
|
20
23
|
</label>
|
|
21
24
|
<span aria-hidden="true"class="cw-TextField-asterisk">*</span>
|
|
22
25
|
</span>
|
|
23
26
|
</legend>
|
|
24
27
|
</fieldset>
|
|
25
|
-
{
|
|
28
|
+
{H.copies()}
|
|
26
29
|
</div>
|
|
27
30
|
<div class="cw-TextField-footer">
|
|
28
31
|
<span aria-live="polite"class="cw-TextField-supporting"id={s}>
|
|
29
32
|
{u}
|
|
30
33
|
</span>
|
|
31
|
-
<span class="cw-TextField-counter"id={r}>{
|
|
34
|
+
<span class="cw-TextField-counter"id={r}>{O}</span>
|
|
32
35
|
</div>
|
|
33
36
|
{a?.content()}
|
|
34
|
-
</div>}class
|
|
35
|
-
|
|
37
|
+
</div>}class ue extends ne{#d;#x;#a;#o;#u;#p;#n;#c;#i;#e;#s;#r;constructor(e){super(e),this.#d="value"in e,this.#x=p(),this.#a=p(),this.#o=p(),this.#u=w(()=>q(e)),this.#p=w(()=>B(e,this.#u())),this.#n=null,this.#c=null,this.#i=null,this.#e=!1,this.#s=!1,this.#r=()=>{},ee(()=>{const t=this.#t();t!==null&&this.#b(t),N(se(this,m))}),N(()=>this.#r())}#t(){return this.functionElement}#f(e){const t=`attr:${e}`;return t in this.props?[super.readProp(t)[0],!0]:[void 0,!1]}#v(){const[e]=this.#f("id");return this.props.id??e??this.#x}#b(e){this.#r(),this.#r=ie(e,this.#h)}#g(e,t){const{onChange:n,onTextChange:s,onValueChange:r}=this.props;r?.(e,t),s!==r&&s?.(e,t),n!==r&&n!==s&&n?.(e,t)}#l(){const e=this.#t();if(!(e===null||this.#s)){if(this.#d){const t=o(()=>this.props.value)??"";e.defaultValue!==t&&(e.defaultValue=t),e.value!==t&&(e.value=t)}this.#h()}}#h=()=>{const e=this.#t(),t=this.#c;if(e!==null){if(t!==null){const n=o(()=>this.props.maxLength);t.textContent=A(e.value.length,n)??""}X(e)&&!le()&&(e.style.blockSize="auto",e.style.blockSize=`${e.scrollHeight}px`)}};commitValue(e,t){const n=this.#t();n!==null&&(this.#d||(n.value=e),this.#g(e,t),this.#l())}#T=e=>{const t=e.currentTarget;this.#g(t.value,e),e.isComposing?this.#h():this.#l()};#E=()=>{this.#s=!0};#S=()=>{this.#s=!1,setTimeout(()=>this.#l(),0)};#F=e=>{const t=this.#t();t===null||e.button!==0||e.target.closest(de)!==null||(e.preventDefault(),t.focus())};#C=e=>{e.preventDefault()};#w=()=>{this.#e=!this.#e,this.#y(),this.#m()};#y(){const e=this.#t();if(e===null||X(e))return;const t=L(o(()=>this.props),this.#e),n=e.getRootNode().activeElement===e,{selectionDirection:s,selectionEnd:r,selectionStart:l}=e;e.type!==t&&(super.setAttribute("type",t),n&&l!==null&&r!==null&&(e.offsetWidth,e.setSelectionRange(l,r,s??void 0)))}#m(){const e=this.#i;e!==null&&(o(()=>{e.disabled=this.props.disabled===!0,e.setAttribute("aria-controls",this.#v()),e.setAttribute("aria-label",this.props.revealPasswordLabel??j)}),e.setAttribute("aria-pressed",this.#e?"true":"false"))}applyComponentProps(){const e=super.readProps(["autocomplete","cols","disabled","id","inputMode","invalid","max","maxLength","min","minLength","multiline","name","noAsterisk","pattern","placeholder","readOnly","required","revealPassword","revealPasswordLabel","rows","secure","spellCheck","step","type","value","variant"]),t=e.multiline===!0,n=e.multilineChanged||void 0,[s]=this.#f("aria-describedby"),[,r]=this.#f("aria-invalid"),l=e.invalid===!0||this.#u()!==void 0,u=A(0,e.maxLength)!==void 0,a=this.#v();e.variantChanged&&super.setClass("variant",Z(e.variant)),e.disabledChanged&&(super.setClass(z,e.disabled===!0),super.setAttribute("disabled",e.disabled===!0)),e.readOnlyChanged&&(super.setClass(Y,e.readOnly===!0),super.setAttribute("readonly",e.readOnly===!0)),super.setClass($,l),r||super.setAttribute("aria-invalid",l?"true":void 0),super.setAttribute("aria-describedby",P(s,this.#p()===void 0?void 0:this.#a,u?this.#o:void 0)),super.setAttribute("id",a),this.#n!==null&&(this.#n.htmlFor=a),e.requiredChanged&&super.setAttribute("required",e.required===!0),e.noAsteriskChanged&&super.setClass(U,e.noAsterisk===!0),e.nameChanged&&super.setAttribute("name",e.name),e.placeholderChanged&&super.setAttribute("placeholder",e.placeholder??W),e.maxLengthChanged&&super.setAttribute("maxlength",e.maxLength),e.minLengthChanged&&super.setAttribute("minlength",e.minLength),e.spellCheckChanged&&super.setAttribute("spellcheck",e.spellCheck),(e.autocompleteChanged||n)&&super.setAttribute("autocomplete",t?void 0:e.autocomplete),(e.inputModeChanged||n)&&super.setAttribute("inputmode",t?void 0:e.inputMode),(e.patternChanged||n)&&super.setAttribute("pattern",t?void 0:e.pattern),(e.minChanged||n)&&super.setAttribute("min",t?void 0:e.min),(e.maxChanged||n)&&super.setAttribute("max",t?void 0:e.max),(e.stepChanged||n)&&super.setAttribute("step",t?void 0:e.step),(e.colsChanged||n)&&super.setAttribute("cols",t?e.cols:void 0),(e.rowsChanged||n)&&(super.setAttribute("rows",t?e.rows??1:void 0),super.setStyle(Q,t?e.rows??1:void 0)),(e.typeChanged||e.secureChanged||e.revealPasswordChanged||n)&&(E(e)||(this.#e=!1),super.setAttribute("type",t?void 0:L(e,this.#e))),(e.valueChanged||e.maxLengthChanged||n)&&this.#l(),this.#m()}onFunctionElementChanged(e){const t=e,n=this.#t();super.onFunctionElementChanged(e),this.#r(),n?.removeEventListener("input",this.#T),n?.removeEventListener("compositionstart",this.#E),n?.removeEventListener("compositionend",this.#S),this.#s=!1,t!==null&&(t.addEventListener("input",this.#T),t.addEventListener("compositionstart",this.#E),t.addEventListener("compositionend",this.#S),o(()=>{n!==null?(t.defaultValue=n.defaultValue,t.value=n.value):this.#d?(t.defaultValue=this.props.value??"",t.value=this.props.value??""):this.props.defaultValue!==void 0&&(t.defaultValue=this.props.defaultValue)}),this.#b(t))}render(e,t){const n=t,s=w(()=>E(this.props)),r=()=>{const d=this.props.multiline===!0;return o(()=>d?<textarea class={y}ref={n}/>:<input class={y}ref={n}/>)},l=()=>{if(!s()){this.#i=null;return}return this.#i=<button aria-pressed="false"class="cw-TextField-reveal"on:click={this.#w}on:mousedown={this.#C}type="button">
|
|
38
|
+
<T class="_cw-TextField-revealEye"name={K}/>
|
|
39
|
+
<T class="_cw-TextField-revealSlash"name={G}/>
|
|
40
|
+
</button>,o(()=>this.#m()),this.#i},u=this.#o,a=this.#a,f=J(m);return<div class={m}>
|
|
41
|
+
<div class="cw-TextField-control"on:mousedown={this.#F}>
|
|
36
42
|
<span class="cw-TextField-leading">
|
|
37
43
|
{c(()=>this.props.leading,()=>this.props.leadingIcon)}
|
|
38
44
|
</span>
|
|
@@ -49,7 +55,7 @@ import{createMemo as T,createUniqueId as p,mergeProps as w,onCleanup as M,onMoun
|
|
|
49
55
|
<legend class="cw-TextField-legend">
|
|
50
56
|
<span class="cw-TextField-label">
|
|
51
57
|
<label class="cw-TextField-labelText"ref={d=>this.#n=d}>
|
|
52
|
-
{f.content(c(()=>this.props.label,()=>
|
|
58
|
+
{f.content(c(()=>this.props.label,()=>ae(e)))}
|
|
53
59
|
</label>
|
|
54
60
|
<span aria-hidden="true"class="cw-TextField-asterisk">*</span>
|
|
55
61
|
</span>
|
|
@@ -64,4 +70,4 @@ import{createMemo as T,createUniqueId as p,mergeProps as w,onCleanup as M,onMoun
|
|
|
64
70
|
<span class="cw-TextField-counter"id={u}ref={d=>this.#c=d}/>
|
|
65
71
|
</div>
|
|
66
72
|
{this.renderExtension()}
|
|
67
|
-
</div>}get labelElement(){return this.#n}renderExtension(){}}const
|
|
73
|
+
</div>}get labelElement(){return this.#n}renderExtension(){}}const _=te(()=>oe,()=>ue);function be(i){return _(I({variant:"outlined"},i))}function ge(i){return _(I({variant:"filled"},i))}function pe(i){return _(I({secure:!0,type:"password"},i))}const Te=pe;export{ge as FilledTextField,be as OutlinedTextField,pe as PasswordField,Te as SecureField,_ as TextField,ue as TextFieldController,oe as renderTextField};
|