@jsekulowicz/ds-components 0.23.0 → 0.23.1
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/custom-elements.json +2 -2
- package/dist/atoms/searchable-select/searchable-select.styles.d.ts.map +1 -1
- package/dist/atoms/searchable-select/searchable-select.styles.js +3 -0
- package/dist/atoms/searchable-select/searchable-select.styles.js.map +1 -1
- package/dist/atoms/select/select.common-styles.d.ts.map +1 -1
- package/dist/atoms/select/select.common-styles.js +5 -1
- package/dist/atoms/select/select.common-styles.js.map +1 -1
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -5147,7 +5147,7 @@
|
|
|
5147
5147
|
{
|
|
5148
5148
|
"kind": "variable",
|
|
5149
5149
|
"name": "searchableSelectStyles",
|
|
5150
|
-
"default": "css` .trigger { flex-wrap: wrap; } .trigger:focus-within { border-color: var(--ds-color-accent); box-shadow: var(--ds-shadow-focus); } .trigger.open { border-color: var(--ds-color-accent); box-shadow: var(--ds-shadow-focus); } .search-input { flex: 1; border: none; outline: none; background: transparent; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); min-width: 0; cursor: pointer; } :host([size='sm']) .search-input { font-size: var(--ds-font-size-xs); } :host([size='lg']) .search-input { font-size: var(--ds-font-size-md); } .search-input::placeholder { color: var(--ds-color-fg-muted); } .trigger.open .search-input { cursor: text; } :host([loading]) .trigger { cursor: default; pointer-events: none; } .spinner { width: 1.2rem; height: 1.2rem; margin-left: var(--ds-space-2); color: var(--ds-color-fg-muted); flex-shrink: 0; animation: spin 0.75s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .trigger.open .caret { transform: rotate(180deg); } .empty { margin: 0; padding: var(--ds-space-3); font-size: var(--ds-font-size-sm); color: var(--ds-color-fg-muted); text-align: center; } mark.match { background: none; color: var(--ds-color-accent); font-weight: var(--ds-font-weight-medium); } `"
|
|
5150
|
+
"default": "css` .trigger { flex-wrap: wrap; } .trigger:focus-within { border-color: var(--ds-color-accent); box-shadow: var(--ds-shadow-focus); } .trigger.open { border-color: var(--ds-color-accent); box-shadow: var(--ds-shadow-focus); } .search-input { flex: 1; border: none; outline: none; background: transparent; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); min-width: 0; cursor: pointer; /* Show a long selected value truncated rather than hard-clipped; the input still scrolls normally while focused and typing. */ text-overflow: ellipsis; } :host([size='sm']) .search-input { font-size: var(--ds-font-size-xs); } :host([size='lg']) .search-input { font-size: var(--ds-font-size-md); } .search-input::placeholder { color: var(--ds-color-fg-muted); } .trigger.open .search-input { cursor: text; } :host([loading]) .trigger { cursor: default; pointer-events: none; } .spinner { width: 1.2rem; height: 1.2rem; margin-left: var(--ds-space-2); color: var(--ds-color-fg-muted); flex-shrink: 0; animation: spin 0.75s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .trigger.open .caret { transform: rotate(180deg); } .empty { margin: 0; padding: var(--ds-space-3); font-size: var(--ds-font-size-sm); color: var(--ds-color-fg-muted); text-align: center; } mark.match { background: none; color: var(--ds-color-accent); font-weight: var(--ds-font-weight-medium); } `"
|
|
5151
5151
|
}
|
|
5152
5152
|
],
|
|
5153
5153
|
"exports": [
|
|
@@ -6458,7 +6458,7 @@
|
|
|
6458
6458
|
{
|
|
6459
6459
|
"kind": "variable",
|
|
6460
6460
|
"name": "selectCommonStyles",
|
|
6461
|
-
"default": "css` :host { --ds-select-size: var(--ds-size-md); display: inline-flex; flex-direction: column; gap: var(--ds-space-1); width: 100%; } :host([size='sm']) { --ds-select-size: var(--ds-size-sm); } :host([size='lg']) { --ds-select-size: var(--ds-size-lg); } :host([size='sm']) .trigger { font-size: var(--ds-font-size-xs); } :host([size='lg']) .trigger { font-size: var(--ds-font-size-md); } .control-wrap { position: relative; width: 100%; } .trigger { /* The popover listbox positions itself against this via CSS anchor positioning (scoped to this shadow root, so instances don't clash). */ anchor-name: --ds-select-trigger; display: flex; align-items: center; gap: var(--ds-space-2); width: 100%; height: var(--ds-select-size); padding: 0 var(--ds-space-3); background: var(--ds-color-bg); border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-sm); transition: border-color var(--ds-duration-fast) var(--ds-easing-standard), box-shadow var(--ds-duration-fast) var(--ds-easing-standard); } .trigger:hover { border-color: var(--ds-color-fg-subtle); } :host([invalid]) .trigger { border-color: var(--ds-color-danger); background: var(--ds-color-danger-subtle); } :host([invalid]) .trigger:is(:focus-visible, :focus-within) { box-shadow: 0 0 0 3px rgba(178, 26, 10, 0.3); } :host([disabled]) .trigger { opacity: 0.5; background: var(--ds-color-bg-subtle); cursor: not-allowed; pointer-events: none; } .trigger-multiple { height: auto; min-height: var(--ds-select-size); padding: 6px var(--ds-space-3); flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); overflow: visible; } .tiles { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); min-width: 0; } .tile { display: inline-flex; align-items: center; gap: var(--ds-space-1); height: 24px; padding: 0 var(--ds-space-1) 0 var(--ds-space-2); background: var(--ds-color-bg-subtle); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-xs); color: var(--ds-color-fg); font-size: var(--ds-font-size-xs); white-space: nowrap; } .tile-focused { border-color: var(--ds-color-accent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ds-color-accent) 35%, transparent); } .tile-overflow { padding: 0 var(--ds-space-2); background: var(--ds-color-accent-subtle); border-color: var(--ds-color-accent); color: var(--ds-color-accent); font-weight: var(--ds-font-weight-medium); } .tile-label {
|
|
6461
|
+
"default": "css` :host { --ds-select-size: var(--ds-size-md); display: inline-flex; flex-direction: column; gap: var(--ds-space-1); width: 100%; } :host([size='sm']) { --ds-select-size: var(--ds-size-sm); } :host([size='lg']) { --ds-select-size: var(--ds-size-lg); } :host([size='sm']) .trigger { font-size: var(--ds-font-size-xs); } :host([size='lg']) .trigger { font-size: var(--ds-font-size-md); } .control-wrap { position: relative; width: 100%; } .trigger { /* The popover listbox positions itself against this via CSS anchor positioning (scoped to this shadow root, so instances don't clash). */ anchor-name: --ds-select-trigger; display: flex; align-items: center; gap: var(--ds-space-2); width: 100%; height: var(--ds-select-size); padding: 0 var(--ds-space-3); background: var(--ds-color-bg); border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-sm); transition: border-color var(--ds-duration-fast) var(--ds-easing-standard), box-shadow var(--ds-duration-fast) var(--ds-easing-standard); } .trigger:hover { border-color: var(--ds-color-fg-subtle); } :host([invalid]) .trigger { border-color: var(--ds-color-danger); background: var(--ds-color-danger-subtle); } :host([invalid]) .trigger:is(:focus-visible, :focus-within) { box-shadow: 0 0 0 3px rgba(178, 26, 10, 0.3); } :host([disabled]) .trigger { opacity: 0.5; background: var(--ds-color-bg-subtle); cursor: not-allowed; pointer-events: none; } .trigger-multiple { height: auto; min-height: var(--ds-select-size); padding: 6px var(--ds-space-3); flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); overflow: visible; } .tiles { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); min-width: 0; } .tile { display: inline-flex; align-items: center; gap: var(--ds-space-1); /* Grow with the label up to the full row width, then the label ellipsizes — rather than hard-capping every tile to a narrow width and wasting the rest of the row. */ max-width: 100%; height: 24px; padding: 0 var(--ds-space-1) 0 var(--ds-space-2); background: var(--ds-color-bg-subtle); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-xs); color: var(--ds-color-fg); font-size: var(--ds-font-size-xs); white-space: nowrap; } .tile-focused { border-color: var(--ds-color-accent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ds-color-accent) 35%, transparent); } .tile-overflow { padding: 0 var(--ds-space-2); background: var(--ds-color-accent-subtle); border-color: var(--ds-color-accent); color: var(--ds-color-accent); font-weight: var(--ds-font-weight-medium); } .tile-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .tile-remove, .clear-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; color: var(--ds-color-fg-muted); cursor: pointer; border-radius: var(--ds-radius-xs); flex-shrink: 0; } .tile-remove { width: 14px; height: 14px; } .tile-remove:hover { color: var(--ds-color-fg); background: var(--ds-color-border); } .tile-remove svg { width: 10px; height: 10px; } .leading { display: inline-flex; align-items: center; color: var(--ds-color-fg-muted); flex-shrink: 0; } .leading[hidden] { display: none; } .clear-btn { width: 1.2rem; height: 1.2rem; } .clear-btn:hover { color: var(--ds-color-fg); } .clear-btn:focus-visible { box-shadow: var(--ds-shadow-focus); } .clear-btn svg { width: 1rem; height: 1rem; } .caret { width: 1.2rem; height: 1.2rem; color: var(--ds-color-fg-muted); pointer-events: none; flex-shrink: 0; transition: transform var(--ds-duration-fast) var(--ds-easing-standard); } .listbox { /* In-flow fallback for browsers without the Popover API. When the API is available the listbox is shown via showPopover() (top layer, so it escapes any overflow:hidden / scroll ancestor) and positioned with CSS anchor positioning — see .listbox[popover]:popover-open below. */ position: absolute; inset: calc(100% + var(--ds-space-1)) 0 auto; z-index: 100; max-height: 240px; overflow-y: auto; background: var(--ds-color-bg); border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-md); /* Thin, subtle scrollbar with a transparent track (matching the shell's main content) instead of the wide, bright default that painted over the listbox's rounded corners. No scrollbar-gutter: the dropdown shouldn't reserve a permanent track when it doesn't overflow. */ scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; } /* Shown in the top layer: position it under the trigger with CSS anchor positioning — matching the trigger's width (so long options wrap rather than widening the menu) and flipping above when there's no room below. The browser keeps it glued to the trigger on scroll, so no JS. */ .listbox[popover]:popover-open { position: fixed; position-anchor: --ds-select-trigger; inset: auto; top: calc(anchor(bottom) + var(--ds-space-1)); left: anchor(left); width: anchor-size(width); margin: 0; padding: 0; position-try-fallbacks: flip-block; } `"
|
|
6462
6462
|
}
|
|
6463
6463
|
],
|
|
6464
6464
|
"exports": [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"searchable-select.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/searchable-select/searchable-select.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,
|
|
1
|
+
{"version":3,"file":"searchable-select.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/searchable-select/searchable-select.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,yBAoElC,CAAC"}
|
|
@@ -21,6 +21,9 @@ export const searchableSelectStyles = css `
|
|
|
21
21
|
font-size: var(--ds-font-size-sm);
|
|
22
22
|
min-width: 0;
|
|
23
23
|
cursor: pointer;
|
|
24
|
+
/* Show a long selected value truncated rather than hard-clipped; the
|
|
25
|
+
input still scrolls normally while focused and typing. */
|
|
26
|
+
text-overflow: ellipsis;
|
|
24
27
|
}
|
|
25
28
|
:host([size='sm']) .search-input {
|
|
26
29
|
font-size: var(--ds-font-size-xs);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"searchable-select.styles.js","sourceRoot":"","sources":["../../../src/atoms/searchable-select/searchable-select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"searchable-select.styles.js","sourceRoot":"","sources":["../../../src/atoms/searchable-select/searchable-select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoExC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.common-styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/select/select.common-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,
|
|
1
|
+
{"version":3,"file":"select.common-styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/select/select.common-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,yBAgM9B,CAAC"}
|
|
@@ -74,6 +74,10 @@ export const selectCommonStyles = css `
|
|
|
74
74
|
display: inline-flex;
|
|
75
75
|
align-items: center;
|
|
76
76
|
gap: var(--ds-space-1);
|
|
77
|
+
/* Grow with the label up to the full row width, then the label
|
|
78
|
+
ellipsizes — rather than hard-capping every tile to a narrow width
|
|
79
|
+
and wasting the rest of the row. */
|
|
80
|
+
max-width: 100%;
|
|
77
81
|
height: 24px;
|
|
78
82
|
padding: 0 var(--ds-space-1) 0 var(--ds-space-2);
|
|
79
83
|
background: var(--ds-color-bg-subtle);
|
|
@@ -95,7 +99,7 @@ export const selectCommonStyles = css `
|
|
|
95
99
|
font-weight: var(--ds-font-weight-medium);
|
|
96
100
|
}
|
|
97
101
|
.tile-label {
|
|
98
|
-
|
|
102
|
+
min-width: 0;
|
|
99
103
|
overflow: hidden;
|
|
100
104
|
text-overflow: ellipsis;
|
|
101
105
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.common-styles.js","sourceRoot":"","sources":["../../../src/atoms/select/select.common-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"select.common-styles.js","sourceRoot":"","sources":["../../../src/atoms/select/select.common-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgMpC,CAAC"}
|
package/package.json
CHANGED