@uzum-tech/ui 0.1.2 → 1.0.1

package/es/_internal/selection/src/Selection.js

@@ -9,6 +9,8 @@ import Suffix from '../../suffix';
 import { internalSelectionLight } from '../styles';
 import style from './styles/index.cssr';
 import { UBaseSkeleton } from '../../../_internal';
+import { getPadding, pxfy, depx } from 'seemly';
+import UBaseClear from '../../clear';
 export default defineComponent({
     name: 'InternalSelection',
     props: Object.assign(Object.assign({}, useTheme.props), { clsPrefix: {
@@ -35,7 +37,7 @@ export default defineComponent({
         }, loading: Boolean, loadingSkeleton: Boolean, autofocus: Boolean, showArrow: {
             type: Boolean,
             default: true
-        }, inputProps: Object, focused: Boolean, renderTag: Function, onKeydown: Function, onClick: Function, onBlur: Function, onFocus: Function, onDeleteOption: Function, maxTagCount: [String, Number], onClear: Function, onPatternInput: Function, onPatternFocus: Function, onPatternBlur: Function, renderLabel: Function, status: String, inlineThemeDisabled: Boolean, ignoreComposition: { type: Boolean, default: true }, onResize: Function }),
+        }, inputProps: Object, focused: Boolean, renderTag: Function, onKeydown: Function, onClick: Function, onBlur: Function, onFocus: Function, onDeleteOption: Function, maxTagCount: [String, Number], onClear: Function, onPatternInput: Function, onPatternFocus: Function, onPatternBlur: Function, renderLabel: Function, status: String, inlineThemeDisabled: Boolean, ignoreComposition: { type: Boolean, default: true }, onResize: Function, round: Boolean, counter: Boolean, secondary: Boolean }),
     setup(props) {
         const patternInputMirrorRef = ref(null);
         const patternInputRef = ref(null);
@@ -80,6 +82,22 @@ export default defineComponent({
                 return props.selectedOption !== null;
             }
         });
+        const showSuffixClearRef = computed(() => {
+            return (mergedClearableRef.value &&
+                selectedRef.value &&
+                !filterCounterVisibleRef.value);
+        });
+        const filterCounterLengthRef = computed(() => {
+            var _a;
+            const length = ((_a = props.selectedOptions) === null || _a === void 0 ? void 0 : _a.length) || 0;
+            return length > 99 ? '99+' : length;
+        });
+        const filterCounterClearableRef = computed(() => {
+            return props.clearable && !props.disabled && filterCounterVisibleRef.value;
+        });
+        const filterCounterVisibleRef = computed(() => {
+            return props.counter && props.multiple && selectedRef.value;
+        });
         function syncMirrorWidth() {
             var _a;
             const { value: patternInputMirrorEl } = patternInputMirrorRef;
@@ -151,6 +169,8 @@ export default defineComponent({
             doBlur(e);
         }
         function handleClear(e) {
+            if (!mergedClearableRef.value)
+                return;
             doClear(e);
         }
         function handleMouseEnter() {
@@ -322,17 +342,22 @@ export default defineComponent({
         });
         useOnResize(selfRef, props.onResize);
         const { inlineThemeDisabled } = props;
-        const cssVarsRef = computed(() => {
+        const tagSizeRef = computed(() => {
             const { size } = props;
-            const { common: { cubicBezierEaseInOut, fontWeight, fontWeightStrong }, self: { borderRadius, color, placeholderColor, textColor, paddingSingle, paddingMultiple, caretColor, colorDisabled, textColorDisabled, placeholderColorDisabled, colorActive, boxShadowFocus, boxShadowActive, boxShadowHover, border, borderFocus, borderHover, borderActive, borderDisabled, arrowColor, arrowColorDisabled, arrowColorHover, loadingColor, 
+            return size === 'huge' ? 'medium' : 'small';
+        });
+        const cssVarsRef = computed(() => {
+            const { size, round } = props;
+            const { common: { cubicBezierEaseInOut, fontWeight }, self: { color, placeholderColor, textColor, caretColor, colorDisabled, textColorDisabled, placeholderColorDisabled, colorActive, boxShadowFocus, boxShadowActive, boxShadowHover, border, borderFocus, borderHover, borderActive, borderDisabled, arrowColor, arrowColorDisabled, arrowColorHover, loadingColor, 
             // form warning
             colorActiveWarning, boxShadowFocusWarning, boxShadowActiveWarning, boxShadowHoverWarning, borderWarning, borderFocusWarning, borderHoverWarning, borderActiveWarning, 
             // form error
             colorActiveError, boxShadowFocusError, boxShadowActiveError, boxShadowHoverError, borderError, borderFocusError, borderHoverError, borderActiveError, 
             // clear
-            clearColor, clearColorHover, clearColorPressed, clearSize, 
-            // arrow
-            arrowSize, [createKey('height', size)]: height, [createKey('fontSize', size)]: fontSize } } = themeRef.value;
+            clearColor, clearColorHover, clearColorPressed, 
+            // secondary
+            arrowColorSecondary, clearColorSecondary, colorSecondary, textColorSecondary, borderSecondary, arrowColorDisabledSecondary, clearColorDisabledSecondary, colorDisabledSecondary, textColorDisabledSecondary, borderDisabledSecondary, arrowColorHoverSecondary, clearColorHoverSecondary, colorHoverSecondary, textColorHoverSecondary, borderHoverSecondary, filterCounterTextColor, filterCounterSeparatorColor, filterCounterTextColorDisabled, filterCounterSeparatorColorDisabled, caretColorSecondary, arrowColorActiveSecondary, clearColorActiveSecondary, colorActiveSecondary, textColorActiveSecondary, borderActiveSecondary, arrowColorFocusSecondary, clearColorFocusSecondary, colorFocusSecondary, textColorFocusSecondary, borderFocusSecondary, [createKey('clearSize', size)]: clearSize, [createKey('arrowSize', size)]: arrowSize, [createKey('padding', size)]: padding, [createKey('borderRadius', size)]: borderRadius, [createKey('height', size)]: height, [createKey('fontSize', size)]: fontSize, [createKey('lineHeight', size)]: lineHeight } } = themeRef.value;
+            const { top: paddingTop, right: paddingRight, bottom: paddingBottom, left: paddingLeft } = getPadding(padding);
             return {
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-border': border,
@@ -340,7 +365,7 @@ export default defineComponent({
                 '--u-border-focus': borderFocus,
                 '--u-border-hover': borderHover,
                 '--u-border-disabled': borderDisabled,
-                '--u-border-radius': borderRadius,
+                '--u-border-radius': round ? '100px' : borderRadius,
                 '--u-box-shadow-active': boxShadowActive,
                 '--u-box-shadow-focus': boxShadowFocus,
                 '--u-box-shadow-hover': boxShadowHover,
@@ -348,12 +373,18 @@ export default defineComponent({
                 '--u-color': color,
                 '--u-color-active': colorActive,
                 '--u-color-disabled': colorDisabled,
+                '--u-line-height': lineHeight,
                 '--u-font-size': fontSize,
                 '--u-font-weight': fontWeight,
-                '--u-font-weight-strong': fontWeightStrong,
                 '--u-height': height,
-                '--u-padding-single': paddingSingle,
-                '--u-padding-multiple': paddingMultiple,
+                '--u-padding': `${paddingTop} 
+          ${pxfy(depx(paddingRight) + depx(arrowSize))} 
+          ${paddingBottom} 
+          ${paddingLeft}`,
+                '--u-padding-top': paddingTop,
+                '--u-padding-right': paddingRight,
+                '--u-padding-left': paddingLeft,
+                '--u-padding-bottom': paddingBottom,
                 '--u-placeholder-color': placeholderColor,
                 '--u-placeholder-color-disabled': placeholderColorDisabled,
                 '--u-text-color': textColor,
@@ -386,7 +417,38 @@ export default defineComponent({
                 '--u-clear-color-hover': clearColorHover,
                 '--u-clear-color-pressed': clearColorPressed,
                 // arrow-size
-                '--u-arrow-size': arrowSize
+                '--u-arrow-size': arrowSize,
+                // secondary
+                '--u-caret-color-secondary': caretColorSecondary,
+                '--u-filter-counter-text-color': filterCounterTextColor,
+                '--u-filter-counter-separator-color': filterCounterSeparatorColor,
+                '--u-filter-counter-text-color-disabled': filterCounterTextColorDisabled,
+                '--u-filter-counter-separator-color-disabled': filterCounterSeparatorColorDisabled,
+                '--u-arrow-color-secondary': arrowColorSecondary,
+                '--u-clear-color-secondary': clearColorSecondary,
+                '--u-color-secondary': colorSecondary,
+                '--u-text-color-secondary': textColorSecondary,
+                '--u-border-secondary': borderSecondary,
+                '--u-arrow-color-disabled-secondary': arrowColorDisabledSecondary,
+                '--u-clear-color-disabled-secondary': clearColorDisabledSecondary,
+                '--u-color-disabled-secondary': colorDisabledSecondary,
+                '--u-text-color-disabled-secondary': textColorDisabledSecondary,
+                '--u-border-disabled-secondary': borderDisabledSecondary,
+                '--u-arrow-color-hover-secondary': arrowColorHoverSecondary,
+                '--u-clear-color-hover-secondary': clearColorHoverSecondary,
+                '--u-color-hover-secondary': colorHoverSecondary,
+                '--u-text-color-hover-secondary': textColorHoverSecondary,
+                '--u-border-hover-secondary': borderHoverSecondary,
+                '--u-arrow-color-active-secondary': arrowColorActiveSecondary,
+                '--u-clear-color-active-secondary': clearColorActiveSecondary,
+                '--u-color-active-secondary': colorActiveSecondary,
+                '--u-text-color-active-secondary': textColorActiveSecondary,
+                '--u-border-active-secondary': borderActiveSecondary,
+                '--u-arrow-color-focus-secondary': arrowColorFocusSecondary,
+                '--u-clear-color-focus-secondary': clearColorFocusSecondary,
+                '--u-color-focus-secondary': colorFocusSecondary,
+                '--u-text-color-focus-secondary': textColorFocusSecondary,
+                '--u-border-focus-secondary': borderFocusSecondary
             };
         });
         const themeClassHandle = inlineThemeDisabled
@@ -440,19 +502,29 @@ export default defineComponent({
             renderLabel: props.renderLabel,
             cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
             themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
-            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
+            showSuffixClear: showSuffixClearRef,
+            filterCounterVisible: filterCounterVisibleRef,
+            filterCounterLength: filterCounterLengthRef,
+            filterCounterClearable: filterCounterClearableRef,
+            tagSize: tagSizeRef
         };
     },
     render() {
-        const { status, multiple, size, disabled, loadingSkeleton, filterable, maxTagCount, bordered, clsPrefix, onRender, renderTag, renderLabel } = this;
+        const { status, multiple, disabled, loadingSkeleton, filterable, maxTagCount, bordered, clsPrefix, onRender, renderTag, renderLabel } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         const maxTagCountResponsive = maxTagCount === 'responsive';
         const maxTagCountNumeric = typeof maxTagCount === 'number';
         const useMaxTagCount = maxTagCountResponsive || maxTagCountNumeric;
+        const filterCounterEl = this.filterCounterVisible && !this.disabled ? (h("div", { class: [`${clsPrefix}-base-selection__filter-counter`] }, this.filterCounterLength)) : null;
+        const clear = this.filterCounterClearable ? (h(UBaseClear, { clsPrefix: clsPrefix, show: true, onClear: this.handleClear })) : null;
         const suffix = (h(Wrapper, null, {
-            default: () => (h(Suffix, { clsPrefix: clsPrefix, loading: this.loading, showArrow: this.showArrow, showClear: this.mergedClearable && this.selected, onClear: this.handleClear }, {
-                default: () => { var _a, _b; return (_b = (_a = this.$slots).arrow) === null || _b === void 0 ? void 0 : _b.call(_a); }
-            }))
+            default: () => (h("div", { class: [`${clsPrefix}-base-selection__suffix-wrapper`] },
+                h(Suffix, { clsPrefix: clsPrefix, loading: this.loading, showArrow: this.showArrow, showClear: this.showSuffixClear, onClear: this.handleClear }, {
+                    default: () => { var _a, _b; return [(_b = (_a = this.$slots).arrow) === null || _b === void 0 ? void 0 : _b.call(_a)]; }
+                }),
+                filterCounterEl,
+                clear))
         }));
         let body;
         if (multiple) {
@@ -462,7 +534,7 @@ export default defineComponent({
                 handleClose: () => {
                     this.handleDeleteOption(option);
                 }
-            })) : (h(UTag, { size: size, closable: !option.disabled, disabled: disabled, onClose: () => {
+            })) : (h(UTag, { size: this.tagSize, closable: !option.disabled, disabled: disabled, onClose: () => {
                     this.handleDeleteOption(option);
                 }, internalCloseIsButtonTag: false, internalCloseFocusable: false }, {
                 default: () => renderLabel
@@ -478,19 +550,19 @@ export default defineComponent({
             // May Overflow
             const renderCounter = maxTagCountResponsive
                 ? () => (h("div", { class: `${clsPrefix}-base-selection-tag-wrapper`, ref: "counterWrapperRef" },
-                    h(UTag, { size: size, ref: "counterRef", onMouseenter: this.handleMouseEnterCounter, onMouseleave: this.handleMouseLeaveCounter, disabled: disabled })))
+                    h(UTag, { size: this.tagSize, ref: "counterRef", onMouseenter: this.handleMouseEnterCounter, onMouseleave: this.handleMouseLeaveCounter, disabled: disabled })))
                 : undefined;
             let counter;
             if (maxTagCountNumeric) {
                 const rest = this.selectedOptions.length - maxTagCount;
                 if (rest > 0) {
                     counter = (h("div", { class: `${clsPrefix}-base-selection-tag-wrapper`, key: "__counter__" },
-                        h(UTag, { size: size, ref: "counterRef", onMouseenter: this.handleMouseEnterCounter, disabled: disabled }, {
+                        h(UTag, { size: this.tagSize, ref: "counterRef", onMouseenter: this.handleMouseEnterCounter, disabled: disabled }, {
                             default: () => `+${rest}`
                         })));
                 }
             }
-            const tags = maxTagCountResponsive ? (filterable ? (h(VOverflow, { ref: "overflowRef", updateCounter: this.updateCounter, getCounter: this.getCounter, getTail: this.getTail, style: {
+            const tags = this.filterCounterVisible ? (this.pattern ? null : (this.placeholder)) : maxTagCountResponsive ? (filterable ? (h(VOverflow, { ref: "overflowRef", updateCounter: this.updateCounter, getCounter: this.getCounter, getTail: this.getTail, style: {
                     width: '100%',
                     display: 'flex',
                     overflow: 'hidden'
@@ -546,8 +618,8 @@ export default defineComponent({
         else {
             if (filterable) {
                 const hasInput = this.pattern || this.isComposing;
-                const showPlaceholder = this.active ? !hasInput : !this.selected;
-                const showSelectedLabel = this.active ? false : this.selected;
+                const showPlaceholder = !hasInput && !this.selected;
+                const showSelectedLabel = !hasInput && this.selected;
                 body = (h("div", { ref: "patternInputWrapperRef", class: `${clsPrefix}-base-selection-label` },
                     h("input", Object.assign({}, this.inputProps, { ref: "patternInputRef", class: `${clsPrefix}-base-selection-input`, value: this.active ? this.pattern : '', placeholder: "", readonly: disabled, disabled: disabled, tabindex: -1, autofocus: this.autofocus, onFocus: this.handlePatternInputFocus, onBlur: this.handlePatternInputBlur, onInput: this.handlePatternInputInput, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd })),
                     showSelectedLabel ? (h("div", { class: `${clsPrefix}-base-selection-label__render-label ${clsPrefix}-base-selection-overlay`, key: "input" },
@@ -584,6 +656,8 @@ export default defineComponent({
                 status && `${clsPrefix}-base-selection--${status}-status`,
                 {
                     [`${clsPrefix}-base-selection--active`]: this.active,
+                    [`${clsPrefix}-base-selection--secondary`]: this.secondary,
+                    [`${clsPrefix}-base-selection--secondary-selected`]: this.secondary && this.selected,
                     [`${clsPrefix}-base-selection--selected`]: this.selected || (this.active && this.pattern),
                     [`${clsPrefix}-base-selection--disabled`]: this.disabled,
                     [`${clsPrefix}-base-selection--multiple`]: this.multiple,
@@ -593,13 +667,13 @@ export default defineComponent({
                     // many redundant codes.
                     [`${clsPrefix}-base-selection--focus`]: this.focused
                 }
-            ], style: this.cssVars, onClick: this.onClick, onMouseenter: this.handleMouseEnter, onMouseleave: this.handleMouseLeave, onKeydown: this.onKeydown, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout, onMousedown: this.handleMouseDown },
+            ], style: this.cssVars, onClick: this.onClick, onMouseenter: this.handleMouseEnter, onMouseleave: this.handleMouseLeave, onKeydown: this.onKeydown, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout, onMousedown: this.handleMouseDown }, loadingSkeleton ? (h(UBaseSkeleton, { sharp: false, round: this.round, class: [
+                `${clsPrefix}-base-selection__loading`,
+                `${clsPrefix}-base-selection__loading--skeleton`
+            ] })) : ([
             body,
             bordered ? (h("div", { class: `${clsPrefix}-base-selection__border` })) : null,
-            bordered ? (h("div", { class: `${clsPrefix}-base-selection__state-border` })) : null,
-            loadingSkeleton ? (h(UBaseSkeleton, { sharp: false, class: [
-                    `${clsPrefix}-base-selection__loading`,
-                    `${clsPrefix}-base-selection__loading--skeleton`
-                ] })) : null));
+            bordered ? (h("div", { class: `${clsPrefix}-base-selection__state-border` })) : null
+        ])));
     }
 });

package/es/_internal/selection/src/interface.d.ts

@@ -4,3 +4,4 @@ export type RenderTag = (props: {
     option: SelectOption;
     handleClose: () => void;
 }) => VNodeChild;
+export type SelectSize = 'tiny' | 'small' | 'medium' | 'large' | 'huge';

package/es/_internal/selection/src/styles/index.cssr.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("css-render").CNode;
+import { type CNode } from 'css-render';
+declare const _default: CNode;
 export default _default;

package/es/_internal/selection/src/styles/index.cssr.js

@@ -1,11 +1,11 @@
 import { c, cB, cE, cM, cNotM } from '../../../../_utils/cssr';
-import commonVariables from '../../../../_styles/common/_common';
 // vars:
 // --u-bezier
 // --u-border
 // --u-border-active
 // --u-border-focus
 // --u-border-hover
+// --u-border-disabled
 // --u-border-radius
 // --u-box-shadow-active
 // --u-box-shadow-focus
@@ -14,19 +14,95 @@ import commonVariables from '../../../../_styles/common/_common';
 // --u-color
 // --u-color-active
 // --u-color-disabled
+// --u-line-height
 // --u-font-size
+// --u-font-weight
 // --u-height
-// --u-padding-single
-// --u-padding-multiple
+// --u-padding
+// --u-padding-top
+// --u-padding-right
+// --u-padding-left
+// --u-padding-bottom
 // --u-placeholder-color
 // --u-placeholder-color-disabled
 // --u-text-color
 // --u-text-color-disabled
 // --u-arrow-color
-// --u-arrow-size
+// --u-arrow-color-hover
+// --u-arrow-color-disabled
 // --u-loading-color
-// ...clear vars
-// ...form item vars
+// --u-color-active-warning
+// --u-box-shadow-focus-warning
+// --u-box-shadow-active-warning
+// --u-box-shadow-hover-warning
+// --u-border-warning
+// --u-border-focus-warning
+// --u-border-hover-warning
+// --u-border-active-warning
+// --u-color-active-error
+// --u-box-shadow-focus-error
+// --u-box-shadow-active-error
+// --u-box-shadow-hover-error
+// --u-border-error
+// --u-border-focus-error
+// --u-border-hover-error
+// --u-border-active-error
+// --u-clear-size
+// --u-clear-color
+// --u-clear-color-hover
+// --u-clear-color-pressed
+// --u-arrow-size
+// --u-caret-color-secondary
+// --u-filter-counter-text-color
+// --u-filter-counter-separator-color
+// --u-filter-counter-text-color-disabled
+// --u-filter-counter-separator-color-disabled
+// --u-arrow-color-secondary
+// --u-clear-color-secondary
+// --u-color-secondary
+// --u-text-color-secondary
+// --u-border-secondary
+// --u-arrow-color-disabled-secondary
+// --u-clear-color-disabled-secondary
+// --u-color-disabled-secondary
+// --u-text-color-disabled-secondary
+// --u-border-disabled-secondary
+// --u-arrow-color-hover-secondary
+// --u-clear-color-hover-secondary
+// --u-color-hover-secondary
+// --u-text-color-hover-secondary
+// --u-border-hover-secondary
+// --u-arrow-color-active-secondary
+// --u-clear-color-active-secondary
+// --u-color-active-secondary
+// --u-text-color-active-secondary
+// --u-border-active-secondary
+// --u-arrow-color-focus-secondary
+// --u-clear-color-focus-secondary
+// --u-color-focus-secondary
+// --u-text-color-focus-secondary
+// --u-border-focus-secondary
+function generateSecondaryStates(state) {
+  return [cB('base-selection-input', `
+ color: var(--u-text-color${state}-secondary);
+ `), cB('base-selection-input-tag', [cE('input', `
+ color: var(--u-text-color${state}-secondary);
+ `)]), cB('base-selection-label', `
+ background-color: var(--u-color${state}-secondary);
+ color: var(--u-text-color${state}-secondary);
+ `, [cE('render-label', `
+ color: var(--u-text-color${state}-secondary);
+ `)]), cB('base-selection-tags', `
+ background-color: var(--u-color${state}-secondary);
+ color: var(--u-text-color${state}-secondary);
+ `), cE('border,state-border', `
+ border: var(--u-border${state}-secondary);
+ `), cB('base-clear', [cE('clear', `
+ color: var(--u-clear-color${state}-secondary);
+ `)]), cB('base-suffix', [cE('arrow', `
+ color: var(--u-arrow-color${state}-secondary);
+ `)])];
+}
 export default c([cB('base-selection', `
  position: relative;
  z-index: auto;
@@ -37,11 +113,11 @@ export default c([cB('base-selection', `
  vertical-align: bottom;
  border-radius: var(--u-border-radius);
  min-height: var(--u-height);
- line-height: 1.5;
+ line-height: var(--u-line-height);
  font-size: var(--u-font-size);
- font-weight: var(--u-font-weight-strong);
- `, [cB('base-clear', [cE('clear', `
- margin: 4px 0 0 4px;
+ font-weight: var(--u-font-weight);
+ `, [cB('base-clear', [cE('placeholder', `
+ font-size: var(--u-arrow-size);
  `)]), cB('base-loading', `
  color: var(--u-loading-color);
  `), cB('base-selection-tags', 'min-height: var(--u-height);'), cE('border, state-border', `
@@ -59,14 +135,25 @@ export default c([cB('base-selection', `
  `), cE('state-border', `
  z-index: 1;
  border-color: #0000;
- `), cB('base-suffix', `
- cursor: pointer;
+ `), cE('suffix-wrapper', `
+ display: flex;
+ align-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
- right: 24px;
- `, [cE('arrow', `
+ right: var(--u-padding-right);
+ `, [cB('base-clear', `
+ font-size: var(--u-clear-size);
+ `)]), cE('filter-counter', `
+ border-left: 1px solid var(--u-filter-counter-separator-color);
+ width: 28px;
+ margin-left: 6px;
+ padding-left: 2px;
+ text-align: center;
+ color: var(--u-filter-counter-text-color);
+ `), cB('base-suffix', `
  font-size: var(--u-arrow-size);
+ `, [cE('arrow', `
  color: var(--u-arrow-color);
  transition: color .3s var(--u-bezier);
  `)]), cB('base-selection-overlay', `
@@ -79,7 +166,7 @@ export default c([cB('base-selection', `
  right: 0;
  bottom: 0;
  left: 0;
- padding: var(--u-padding-single);
+ padding: var(--u-padding);
  transition: color .3s var(--u-bezier);
  `, [cE('wrapper', `
  flex-basis: 0;
@@ -99,7 +186,9 @@ export default c([cB('base-selection', `
  position: relative;
  z-index: auto;
  display: flex;
- padding: var(--u-padding-multiple);
+ padding: var(--u-padding);
+ padding-top: 4px;
+ padding-bottom: 4px;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
@@ -135,7 +224,7 @@ export default c([cB('base-selection', `
  box-sizing: border-box;
  border:none;
  width: 100%;
- padding: var(--u-padding-single);
+ padding: var(--u-padding);
  background-color: #0000;
  color: var(--u-text-color);
  transition: color .3s var(--u-bezier);
@@ -146,7 +235,9 @@ export default c([cB('base-selection', `
  white-space: nowrap; 
  `)]), cE('render-label', `
  color: var(--u-text-color);
- `)]), cNotM('disabled', [c('&:hover', [cE('state-border', `
+ `)]), cNotM('disabled', [cM('secondary', [cB('base-selection-placeholder', `
+ color: var(--u-text-color);
+ `)]), c('&:hover', [cE('state-border', `
  box-shadow: var(--u-box-shadow-hover);
  border: var(--u-border-hover);
  `), cB('base-suffix', [cE('arrow', `
@@ -163,6 +254,9 @@ export default c([cB('base-selection', `
  color: var(--u-arrow-color-hover);
  `)]), cB('base-selection-label', 'background-color: var(--u-color-active);'), cB('base-selection-tags', 'background-color: var(--u-color-active);')])]), cM('skeleton', 'cursor: not-allowed;'), cM('disabled', 'cursor: not-allowed;', [cE('border', `
  border: var(--u-border-disabled);
+ `), cE('filter-counter', `
+ color: var(--u-filter-counter-text-color-disabled);
+ border-color: var(--u-filter-counter-separator-color-disabled);
  `), cB('base-suffix', [cE('arrow', `
  color: var(--u-arrow-color-disabled);
  `)]), cB('base-selection-label', `
@@ -177,19 +271,17 @@ export default c([cB('base-selection', `
  max-width: 100%;
  display: inline-flex;
  padding: 2px 8px 2px 0;
- `, [cB('tag', 'background-color: #E7E8EA;')]), cB('base-selection-tags', `
+ `), cB('base-selection-tags', `
  cursor: not-allowed;
  background-color: var(--u-color-disabled);
  `), cB('base-selection-placeholder', `
  cursor: not-allowed;
  color: var(--u-placeholder-color-disabled);
- `)]), cB('base-selection-input-tag', `
- height: calc(var(--u-height) - 6px);
- line-height: calc(var(--u-height) - 6px);
+ `), cM('secondary-selected', [generateSecondaryStates('-disabled')])]), cB('base-selection-input-tag', `
+ line-height: calc(var(--u-height) - 12px);
  outline: none;
  display: none;
  position: relative;
- margin-bottom: 3px;
  max-width: 100%;
  vertical-align: bottom;
  `, [cE('input', `
@@ -220,20 +312,24 @@ export default c([cB('base-selection', `
  max-width: 100%;
  display: inline-flex;
  padding: 2px 8px 2px 0;
- `, [cB('tag', 'background-color: var(--u-color);')]), ['warning', 'error'].map(status => cM(`${status}-status`, [cE('state-border', `border: var(--u-border-${status});`), cNotM('disabled', [c('&:hover', [cE('state-border', `
- box-shadow: var(--u-box-shadow-hover-${status});
- border: var(--u-border-hover-${status});
- `)]), cM('active', [cE('state-border', `
+ `, [cB('tag', 'background-color: var(--u-color);')]), cM('secondary-selected', [generateSecondaryStates(''), cB('base-selection-input', `
+ caret-color: var(--u-caret-color-secondary);
+ `), cB('base-selection-tags', `
+ padding-right: calc(var(--u-padding-right) + var(--u-arrow-size) + 37px + var(--u-clear-size));
+ `), cNotM('disabled', [c('&:hover', [generateSecondaryStates('-hover'), cB('base-clear', '--u-clear-color-hover: var(--u-clear-color-hover-secondary)')]), cM('focus', [generateSecondaryStates('-focus')]), cM('active', [generateSecondaryStates('-active')])])]), ['warning', 'error'].map(status => cM(`${status}-status`, [cE('state-border', `border: var(--u-border-${status});`), cNotM('secondary-selected', [cNotM('disabled', [cM('active', [cB('base-selection-label', `background-color: var(--u-color-active-${status});`), cB('base-selection-tags', `background-color: var(--u-color-active-${status});`)])])]), cNotM('disabled', [cM('active', [cE('state-border', `
  box-shadow: var(--u-box-shadow-active-${status});
  border: var(--u-border-active-${status});
- `), cB('base-selection-label', `background-color: var(--u-color-active-${status});`), cB('base-selection-tags', `background-color: var(--u-color-active-${status});`)]), cM('focus', [cE('state-border', `
+ `)]), cM('focus', [cE('state-border', `
  box-shadow: var(--u-box-shadow-focus-${status});
  border: var(--u-border-focus-${status});
+ `)]), c('&:hover', [cE('state-border', `
+ box-shadow: var(--u-box-shadow-hover-${status});
+ border: var(--u-border-hover-${status});
  `)])])])), cE('loading', null, [cM('skeleton', {
-  width: `calc(100% + ${commonVariables.borderWidth * 2}px)`,
-  height: `calc(100% + ${commonVariables.borderWidth * 2}px)`,
-  left: `-${commonVariables.borderWidth}px`,
-  top: `-${commonVariables.borderWidth}px`,
+  width: 'calc(100% + 2px)',
+  height: 'calc(100% + 2px)',
+  left: '-1px',
+  top: '-1px',
   position: 'absolute',
   zIndex: 2,
   borderRadius: 'var(--u-border-radius)',
@@ -248,10 +344,7 @@ export default c([cB('base-selection', `
  display: inline-flex;
  padding: 2px 8px 2px 0;
  `, [c('&:last-child', 'padding-right: 0;'), cB('tag', `
- font-size: 14px;
  max-width: 100%;
- background-color: var(--u-color-disabled);
- border-radius: calc(var(--u-height) / 2);
  `, [cE('content', `
  line-height: 20px;
  font-weight: 500;

package/es/_internal/selection/styles/dark.js

@@ -1,36 +1,12 @@
-import { changeColor } from 'seemly';
 import { commonDark } from '../../../_styles/common';
 import { popoverDark } from '../../../popover/styles';
-import commonVars from './_common';
+import { self } from './light';
 const internalSelectionDark = {
     name: 'InternalSelection',
     common: commonDark,
     peers: {
         Popover: popoverDark
     },
-    self(vars) {
-        const { borderRadius, textColor2, inputColor, inputColorDisabled, primaryColor, primaryColorHover, warningColor, warningColorHover, errorColor, errorColorHover, iconColor, iconColorDisabled, clearColor, clearColorHover, clearColorPressed, placeholderColor, placeholderColorDisabled, fontSizeTiny, fontSizeSmall, fontSizeLarge, buttonColor2Hover } = vars;
-        return Object.assign(Object.assign({}, commonVars), { fontSizeTiny,
-            fontSizeSmall, fontSizeMedium: '16px', fontSizeLarge, heightTiny: '32px', heightSmall: '40px', heightMedium: '48px', heightLarge: '56px', borderRadius, 
-            // default
-            textColor: textColor2, textColorDisabled: '#808080', placeholderColor,
-            placeholderColorDisabled, color: inputColor, colorDisabled: inputColorDisabled, colorActive: changeColor(primaryColor, { alpha: 0.1 }), border: `2px solid ${buttonColor2Hover}`, borderHover: `2px solid ${primaryColorHover}`, borderActive: `2px solid ${primaryColor}`, borderFocus: `2px solid ${primaryColorHover}`, borderDisabled: `1px solid ${buttonColor2Hover}`, boxShadowHover: 'none', boxShadowActive: `0 0 0 0 ${changeColor(primaryColor, {
-                alpha: 0.2
-            })}`, boxShadowFocus: `0 0 0 0 ${changeColor(primaryColor, { alpha: 0.2 })}`, caretColor: primaryColor, arrowColor: iconColor, arrowColorHover: primaryColor, arrowColorDisabled: iconColorDisabled, loadingColor: iconColor, 
-            // warning
-            borderWarning: `2px solid ${warningColor}`, borderHoverWarning: `2px solid ${warningColorHover}`, borderActiveWarning: `2px solid ${warningColor}`, borderFocusWarning: `2px solid ${warningColorHover}`, boxShadowHoverWarning: 'none', boxShadowActiveWarning: `0 0 0 0 ${changeColor(warningColor, {
-                alpha: 0.2
-            })}`, boxShadowFocusWarning: `0 0 0 0 ${changeColor(warningColor, {
-                alpha: 0.2
-            })}`, colorActiveWarning: inputColor, caretColorWarning: warningColor, 
-            // error
-            borderError: `2px solid ${errorColor}`, borderHoverError: `2px solid ${errorColorHover}`, borderActiveError: `2px solid ${errorColor}`, borderFocusError: `2px solid ${errorColorHover}`, boxShadowHoverError: 'none', boxShadowActiveError: `0 0 0 0 ${changeColor(errorColor, {
-                alpha: 0.2
-            })}`, boxShadowFocusError: `0 0 0 0 ${changeColor(errorColor, {
-                alpha: 0.2
-            })}`, colorActiveError: inputColor, caretColorError: errorColor, clearColor,
-            clearColorHover,
-            clearColorPressed });
-    }
+    self
 };
 export default internalSelectionDark;