@studiolxd/brand 45.0.0 → 45.1.0
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/CHANGELOG.md +36 -0
- package/dist/_shared/tokens.js +9 -0
- package/dist/brand.css +137 -6
- package/dist/multi-select.css +1 -1
- package/dist/multi-select.js +1 -2
- package/dist/select.css +1 -1
- package/dist/select.js +1 -2
- package/dist/tokens.css +137 -6
- package/package.json +1 -1
- package/src/tokens/components/control.css +4 -1
- package/src/tokens/components/multi-select.css +3 -0
- package/src/tokens/components/select.css +3 -0
- package/src/tokens/molecules/filter-bar.css +2 -2
- package/src/tokens/scss/components/_control.scss +4 -1
- package/src/tokens/scss/components/_multi-select.scss +3 -0
- package/src/tokens/scss/components/_select.scss +3 -0
- package/src/tokens/scss/molecules/_filter-bar.scss +2 -2
- package/src/tokens/surface-public.css +124 -2
- package/src/tokens/tokens.json +9 -0
package/dist/multi-select.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.multi-select{justify-content:space-between;align-items:center;gap:var(--multi-select-content-gap);min-block-size:var(--multi-select-height);padding-block:0;padding-inline:var(--multi-select-padding-inline);font-family:var(--multi-select-font-family);font-size:var(--multi-select-font-size);line-height:var(--multi-select-line-height);font-weight:var(--multi-select-font-weight);color:var(--multi-select-color);background-color:var(--multi-select-bg);border-width:var(--multi-select-border-width);border-style:var(--multi-select-border-style);border-color:var(--multi-select-border-color);border-radius:var(--multi-select-border-radius);box-sizing:border-box;cursor:pointer;width:100%;display:inline-flex}.multi-select:focus,.multi-select[data-popup-open]{outline:none}.multi-select:has(.multi-select__combobox:focus-visible){outline:var(--multi-select-focus-ring-width) solid var(--multi-select-focus-ring-color);outline-offset:calc(-1 * (var(--multi-select-focus-ring-width) + var(--multi-select-border-width)))}.multi-select__combobox{outline:none;flex:auto;align-items:center;min-width:0;display:inline-flex}.multi-select.multi-select--disabled{opacity:var(--multi-select-disabled-opacity);cursor:var(--multi-select-disabled-cursor);pointer-events:none}.multi-select__values{align-items:center;gap:var(--multi-select-selection-gap);flex-wrap:wrap;flex:1;min-width:0;display:flex}.multi-select__placeholder{color:var(--multi-select-placeholder-color)}.multi-select__pill{align-items:center;gap:var(--multi-select-pill-gap);padding-block:var(--multi-select-pill-padding-block);padding-inline:var(--multi-select-pill-padding-inline);background-color:var(--multi-select-pill-bg);color:var(--multi-select-pill-color);border-radius:var(--multi-select-pill-border-radius);font-size:var(--multi-select-pill-font-size);line-height:var(--multi-select-pill-line-height);white-space:nowrap;display:inline-flex}.multi-select__pill-label{line-height:var(--multi-select-pill-line-height)}.multi-select__pill-remove{all:unset;cursor:pointer;line-height:var(--multi-select-pill-line-height);font-size:var(--multi-select-pill-font-size);opacity:var(--multi-select-pill-remove-opacity);justify-content:center;align-items:center;display:inline-flex}.multi-select__pill-remove:hover{opacity:var(--multi-select-pill-remove-hover-opacity)}.multi-select__icon{transition:transform var(--multi-select-icon-transition) var(--multi-select-icon-transition-easing);flex-shrink:0;transform:rotate(90deg)}[data-popup-open] .multi-select__icon{transform:rotate(-90deg)}.multi-select__content{background-color:var(--multi-select-content-bg);border-width:var(--multi-select-border-width);border-style:var(--multi-select-border-style);border-color:var(--multi-select-content-border-color);min-width:var(--anchor-width);max-height:var(--multi-select-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.multi-select__content[data-side=bottom]{border-top:none}.multi-select__content[data-side=top]{border-bottom:none}.multi-select__item{all:unset;box-sizing:border-box;align-items:center;gap:var(--multi-select-padding-inline);width:100%;padding-block:var(--multi-select-item-padding-block);padding-inline:var(--multi-select-padding-inline);font-size:var(--multi-select-font-size);font-family:var(--multi-select-font-family);color:var(--multi-select-color);cursor:pointer;display:flex}.multi-select__item.multi-select__item--active,.multi-select__item:hover{background-color:var(--multi-select-item-highlighted-bg);color:var(--multi-select-item-highlighted-color)}.multi-select__item.multi-select__item--selected{font-weight:var(--multi-select-item-selected-font-weight)}.multi-select__content .multi-select__item+.multi-select__item,.multi-select__content[data-side=bottom] .multi-select__item:first-child{border-top:var(--multi-select-border-width) var(--multi-select-border-style) var(--multi-select-content-border-color)}.multi-select__content[data-side=top] .multi-select__item:last-child{border-bottom:var(--multi-select-border-width) var(--multi-select-border-style) var(--multi-select-content-border-color)}.multi-select__item-check{width:var(--checkbox-size);height:var(--checkbox-size);border-width:var(--checkbox-border-width);border-style:var(--checkbox-border-style);transition:background-color var(--checkbox-transition-duration) var(--checkbox-transition-easing);background-color:#0000;border-color:currentColor;flex-shrink:0;place-content:center;display:grid}.multi-select__item--selected .multi-select__item-check{background-color:currentColor}.multi-select__item-check-mark{width:var(--checkbox-check-size);height:var(--checkbox-check-size);background-color:var(--multi-select-content-bg);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);transition:transform var(--checkbox-transition-duration) var(--checkbox-transition-easing);transform:scale(0)}.multi-select__item--selected .multi-select__item-check-mark{transform:scale(1)}.multi-select__item--active .multi-select__item-check-mark,.multi-select__item:hover .multi-select__item-check-mark{background-color:var(--multi-select-item-highlighted-bg)}.multi-select.multi-select--sm{font-size:var(--multi-select-sm-font-size);--multi-select-height:var(--multi-select-sm-height);padding-inline:var(--multi-select-sm-padding-inline)}.multi-select__content--sm .multi-select__item{font-size:var(--multi-select-sm-font-size);padding-block:var(--multi-select-sm-item-padding-block)}.multi-select.multi-select--lg{font-size:var(--multi-select-lg-font-size);--multi-select-height:var(--multi-select-lg-height);padding-inline:var(--multi-select-lg-padding-inline)}.multi-select__content--lg .multi-select__item{font-size:var(--multi-select-lg-font-size);padding-block:var(--multi-select-lg-item-padding-block)}.multi-select__positioner{z-index:var(--multi-select-content-z-index)}.multi-select.multi-select--error{border-color:var(--multi-select-error-border-color)}
|
|
1
|
+
.multi-select{justify-content:space-between;align-items:center;gap:var(--multi-select-content-gap);min-block-size:var(--multi-select-height);padding-block:0;padding-inline:var(--multi-select-padding-inline);font-family:var(--multi-select-font-family);font-size:var(--multi-select-font-size);line-height:var(--multi-select-line-height);font-weight:var(--multi-select-font-weight);color:var(--multi-select-color);background-color:var(--multi-select-bg);border-width:var(--multi-select-border-width);border-style:var(--multi-select-border-style);border-color:var(--multi-select-border-color);border-radius:var(--multi-select-border-radius);box-sizing:border-box;cursor:pointer;width:100%;display:inline-flex}.multi-select:focus,.multi-select[data-popup-open]{outline:none}.multi-select:has(.multi-select__combobox:focus-visible){outline:var(--multi-select-focus-ring-width) solid var(--multi-select-focus-ring-color);outline-offset:calc(-1 * (var(--multi-select-focus-ring-width) + var(--multi-select-border-width)))}.multi-select__combobox{outline:none;flex:auto;align-items:center;min-width:0;display:inline-flex}.multi-select.multi-select--disabled{opacity:var(--multi-select-disabled-opacity);cursor:var(--multi-select-disabled-cursor);pointer-events:none}.multi-select__values{align-items:center;gap:var(--multi-select-selection-gap);flex-wrap:wrap;flex:1;min-width:0;display:flex}.multi-select__placeholder{color:var(--multi-select-placeholder-color)}.multi-select__pill{align-items:center;gap:var(--multi-select-pill-gap);padding-block:var(--multi-select-pill-padding-block);padding-inline:var(--multi-select-pill-padding-inline);background-color:var(--multi-select-pill-bg);color:var(--multi-select-pill-color);border-radius:var(--multi-select-pill-border-radius);font-size:var(--multi-select-pill-font-size);line-height:var(--multi-select-pill-line-height);white-space:nowrap;display:inline-flex}.multi-select__pill-label{line-height:var(--multi-select-pill-line-height)}.multi-select__pill-remove{all:unset;cursor:pointer;line-height:var(--multi-select-pill-line-height);font-size:var(--multi-select-pill-font-size);opacity:var(--multi-select-pill-remove-opacity);justify-content:center;align-items:center;display:inline-flex}.multi-select__pill-remove:hover{opacity:var(--multi-select-pill-remove-hover-opacity)}.multi-select .multi-select__icon{--icon-size:var(--multi-select-icon-size)}.multi-select__icon{transition:transform var(--multi-select-icon-transition) var(--multi-select-icon-transition-easing);flex-shrink:0;transform:rotate(90deg)}[data-popup-open] .multi-select__icon{transform:rotate(-90deg)}.multi-select__content{background-color:var(--multi-select-content-bg);border-width:var(--multi-select-border-width);border-style:var(--multi-select-border-style);border-color:var(--multi-select-content-border-color);min-width:var(--anchor-width);max-height:var(--multi-select-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.multi-select__content[data-side=bottom]{border-top:none}.multi-select__content[data-side=top]{border-bottom:none}.multi-select__item{all:unset;box-sizing:border-box;align-items:center;gap:var(--multi-select-padding-inline);width:100%;padding-block:var(--multi-select-item-padding-block);padding-inline:var(--multi-select-padding-inline);font-size:var(--multi-select-font-size);font-family:var(--multi-select-font-family);color:var(--multi-select-color);cursor:pointer;display:flex}.multi-select__item.multi-select__item--active,.multi-select__item:hover{background-color:var(--multi-select-item-highlighted-bg);color:var(--multi-select-item-highlighted-color)}.multi-select__item.multi-select__item--selected{font-weight:var(--multi-select-item-selected-font-weight)}.multi-select__content .multi-select__item+.multi-select__item,.multi-select__content[data-side=bottom] .multi-select__item:first-child{border-top:var(--multi-select-border-width) var(--multi-select-border-style) var(--multi-select-content-border-color)}.multi-select__content[data-side=top] .multi-select__item:last-child{border-bottom:var(--multi-select-border-width) var(--multi-select-border-style) var(--multi-select-content-border-color)}.multi-select__item-check{width:var(--checkbox-size);height:var(--checkbox-size);border-width:var(--checkbox-border-width);border-style:var(--checkbox-border-style);transition:background-color var(--checkbox-transition-duration) var(--checkbox-transition-easing);background-color:#0000;border-color:currentColor;flex-shrink:0;place-content:center;display:grid}.multi-select__item--selected .multi-select__item-check{background-color:currentColor}.multi-select__item-check-mark{width:var(--checkbox-check-size);height:var(--checkbox-check-size);background-color:var(--multi-select-content-bg);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);transition:transform var(--checkbox-transition-duration) var(--checkbox-transition-easing);transform:scale(0)}.multi-select__item--selected .multi-select__item-check-mark{transform:scale(1)}.multi-select__item--active .multi-select__item-check-mark,.multi-select__item:hover .multi-select__item-check-mark{background-color:var(--multi-select-item-highlighted-bg)}.multi-select.multi-select--sm{font-size:var(--multi-select-sm-font-size);--multi-select-height:var(--multi-select-sm-height);padding-inline:var(--multi-select-sm-padding-inline);--multi-select-icon-size:var(--multi-select-sm-icon-size)}.multi-select__content--sm .multi-select__item{font-size:var(--multi-select-sm-font-size);padding-block:var(--multi-select-sm-item-padding-block)}.multi-select.multi-select--lg{font-size:var(--multi-select-lg-font-size);--multi-select-height:var(--multi-select-lg-height);padding-inline:var(--multi-select-lg-padding-inline);--multi-select-icon-size:var(--multi-select-lg-icon-size)}.multi-select__content--lg .multi-select__item{font-size:var(--multi-select-lg-font-size);padding-block:var(--multi-select-lg-item-padding-block)}.multi-select__positioner{z-index:var(--multi-select-content-z-index)}.multi-select.multi-select--error{border-color:var(--multi-select-error-border-color)}
|
package/dist/multi-select.js
CHANGED
|
@@ -133,8 +133,7 @@ var d = 500, f = n(function({ options: n, value: f, defaultValue: p = [], placeh
|
|
|
133
133
|
}),
|
|
134
134
|
/* @__PURE__ */ s(t, {
|
|
135
135
|
name: "chevron",
|
|
136
|
-
className: "multi-select__icon"
|
|
137
|
-
size: _ === "sm" ? "xs" : _ === "lg" ? "md" : "sm"
|
|
136
|
+
className: "multi-select__icon"
|
|
138
137
|
}),
|
|
139
138
|
b && U.map((e) => /* @__PURE__ */ s("input", {
|
|
140
139
|
type: "hidden",
|
package/dist/select.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.select{justify-content:space-between;align-items:center;gap:var(--select-icon-gap);block-size:var(--select-height);padding-block:0;padding-inline:var(--select-padding-inline);font-family:var(--select-font-family);font-size:var(--select-font-size);line-height:var(--select-line-height);font-weight:var(--select-font-weight);color:var(--select-color);background-color:var(--select-bg);border-width:var(--select-border-width);border-style:var(--select-border-style);border-color:var(--select-border-color);border-radius:var(--select-border-radius);box-sizing:border-box;cursor:pointer;width:100%;display:inline-flex}.select:focus,.select[data-popup-open]{outline:none}.select:focus-visible{outline:var(--select-focus-ring-width) solid var(--select-focus-ring-color);outline-offset:calc(-1 * (var(--select-focus-ring-width) + var(--select-border-width)))}.select__icon{transition:transform var(--select-icon-transition) var(--motion-easing-default);flex-shrink:0;transform:rotate(90deg)}[data-popup-open] .select__icon{transform:rotate(-90deg)}.select__positioner{z-index:var(--select-content-z-index)}.select__content{background-color:var(--select-content-bg);border-width:var(--select-border-width);border-style:var(--select-border-style);border-color:var(--select-content-border-color);min-width:var(--anchor-width);max-height:var(--select-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.select__content[data-side=bottom]{border-top:none}.select__content[data-side=top]{border-bottom:none}.select__item{width:100%;padding-block:var(--select-item-padding-block);padding-inline:var(--select-padding-inline);font-size:var(--select-font-size);font-family:var(--select-font-family);cursor:pointer;align-items:center;display:flex}.select__item[data-highlighted]{background-color:var(--select-item-highlighted-bg);color:var(--select-item-highlighted-color)}.select__item[data-selected]{font-weight:var(--select-item-selected-font-weight)}.select__content .select__item+.select__item,.select__content[data-side=bottom] .select__item:first-child{border-top:var(--select-border-width) var(--select-border-style) var(--select-content-border-color)}.select__content[data-side=top] .select__item:last-child{border-bottom:var(--select-border-width) var(--select-border-style) var(--select-content-border-color)}.select.select--sm{block-size:var(--select-sm-height);font-size:var(--select-sm-font-size);padding-inline:var(--select-sm-padding-inline)}.select__content--sm .select__item{font-size:var(--select-sm-font-size);padding-block:var(--select-sm-item-padding-block)}.select.select--lg{block-size:var(--select-lg-height);font-size:var(--select-lg-font-size);padding-inline:var(--select-lg-padding-inline)}.select__content--lg .select__item{font-size:var(--select-lg-font-size);padding-block:var(--select-lg-item-padding-block)}.select__content .select__group:not(:first-child)>.select__label,.select__content[data-side=bottom] .select__group:first-child>.select__label,.select__content .select__group+.select__item{border-top:var(--select-border-width) var(--select-border-style) var(--select-content-border-color)}.select__content[data-side=top] .select__group:last-child>.select__item:last-child{border-bottom:var(--select-border-width) var(--select-border-style) var(--select-content-border-color)}.select__label{padding-block:var(--select-item-padding-block);padding-inline:var(--select-padding-inline);font-family:var(--label-font-family);font-size:var(--label-font-size);font-weight:var(--label-font-weight);line-height:var(--label-line-height);color:var(--label-color);letter-spacing:var(--label-letter-spacing)}.select__separator{height:var(--select-separator-height);background-color:var(--select-separator-color);margin-block:var(--select-item-padding-block)}.select[aria-invalid=true]{border-color:var(--select-error-border-color)}
|
|
1
|
+
.select{justify-content:space-between;align-items:center;gap:var(--select-icon-gap);block-size:var(--select-height);padding-block:0;padding-inline:var(--select-padding-inline);font-family:var(--select-font-family);font-size:var(--select-font-size);line-height:var(--select-line-height);font-weight:var(--select-font-weight);color:var(--select-color);background-color:var(--select-bg);border-width:var(--select-border-width);border-style:var(--select-border-style);border-color:var(--select-border-color);border-radius:var(--select-border-radius);box-sizing:border-box;cursor:pointer;width:100%;display:inline-flex}.select:focus,.select[data-popup-open]{outline:none}.select:focus-visible{outline:var(--select-focus-ring-width) solid var(--select-focus-ring-color);outline-offset:calc(-1 * (var(--select-focus-ring-width) + var(--select-border-width)))}.select .select__icon{--icon-size:var(--select-icon-size)}.select__icon{transition:transform var(--select-icon-transition) var(--motion-easing-default);flex-shrink:0;transform:rotate(90deg)}[data-popup-open] .select__icon{transform:rotate(-90deg)}.select__positioner{z-index:var(--select-content-z-index)}.select__content{background-color:var(--select-content-bg);border-width:var(--select-border-width);border-style:var(--select-border-style);border-color:var(--select-content-border-color);min-width:var(--anchor-width);max-height:var(--select-content-max-height,var(--available-height));overscroll-behavior:contain;overflow-y:auto}.select__content[data-side=bottom]{border-top:none}.select__content[data-side=top]{border-bottom:none}.select__item{width:100%;padding-block:var(--select-item-padding-block);padding-inline:var(--select-padding-inline);font-size:var(--select-font-size);font-family:var(--select-font-family);cursor:pointer;align-items:center;display:flex}.select__item[data-highlighted]{background-color:var(--select-item-highlighted-bg);color:var(--select-item-highlighted-color)}.select__item[data-selected]{font-weight:var(--select-item-selected-font-weight)}.select__content .select__item+.select__item,.select__content[data-side=bottom] .select__item:first-child{border-top:var(--select-border-width) var(--select-border-style) var(--select-content-border-color)}.select__content[data-side=top] .select__item:last-child{border-bottom:var(--select-border-width) var(--select-border-style) var(--select-content-border-color)}.select.select--sm{block-size:var(--select-sm-height);font-size:var(--select-sm-font-size);padding-inline:var(--select-sm-padding-inline);--select-icon-size:var(--select-sm-icon-size)}.select__content--sm .select__item{font-size:var(--select-sm-font-size);padding-block:var(--select-sm-item-padding-block)}.select.select--lg{block-size:var(--select-lg-height);font-size:var(--select-lg-font-size);padding-inline:var(--select-lg-padding-inline);--select-icon-size:var(--select-lg-icon-size)}.select__content--lg .select__item{font-size:var(--select-lg-font-size);padding-block:var(--select-lg-item-padding-block)}.select__content .select__group:not(:first-child)>.select__label,.select__content[data-side=bottom] .select__group:first-child>.select__label,.select__content .select__group+.select__item{border-top:var(--select-border-width) var(--select-border-style) var(--select-content-border-color)}.select__content[data-side=top] .select__group:last-child>.select__item:last-child{border-bottom:var(--select-border-width) var(--select-border-style) var(--select-content-border-color)}.select__label{padding-block:var(--select-item-padding-block);padding-inline:var(--select-padding-inline);font-family:var(--label-font-family);font-size:var(--label-font-size);font-weight:var(--label-font-weight);line-height:var(--label-line-height);color:var(--label-color);letter-spacing:var(--label-letter-spacing)}.select__separator{height:var(--select-separator-height);background-color:var(--select-separator-color);margin-block:var(--select-item-padding-block)}.select[aria-invalid=true]{border-color:var(--select-error-border-color)}
|
package/dist/select.js
CHANGED
|
@@ -62,8 +62,7 @@ var g = i(function({ placeholder: e, children: t, ...n }, r) {
|
|
|
62
62
|
...i,
|
|
63
63
|
children: [r, /* @__PURE__ */ l(t, {
|
|
64
64
|
name: "chevron",
|
|
65
|
-
className: "select__icon"
|
|
66
|
-
size: e === "sm" ? "xs" : e === "lg" ? "md" : "sm"
|
|
65
|
+
className: "select__icon"
|
|
67
66
|
})]
|
|
68
67
|
});
|
|
69
68
|
}), y = i(function({ size: e = "md", container: t, className: n, children: r, side: i = "bottom", align: a = "start", sideOffset: o = -1, ...s }, c) {
|