@sebgroup/green-core 3.11.0 → 3.11.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/components/table/table.component.js +16 -8
- package/components/table/table.styles.js +19 -0
- package/custom-elements.json +68865 -68865
- package/gds-element.js +1 -1
- package/generated/mcp/components.json +1 -1
- package/generated/mcp/icons.json +1 -1
- package/generated/mcp/index.json +1 -1
- package/generated/mcp/tokens.json +1 -1
- package/generated/react/index.d.ts +6 -6
- package/generated/react/index.js +6 -6
- package/package.json +1 -1
- package/utils/helpers/custom-element-scoping.js +1 -1
|
@@ -751,19 +751,27 @@ renderColumnHeader_fn = function(column) {
|
|
|
751
751
|
style=${style}
|
|
752
752
|
data-col-key=${ifDefined(column.sticky ? column.key : void 0)}
|
|
753
753
|
aria-sort="${isSorted ? sortDirection === "asc" ? "ascending" : "descending" : "none"}"
|
|
754
|
-
@click=${column.sortable ? () => __privateMethod(this, _handleSort, handleSort_fn).call(this, column.key) : null}
|
|
755
754
|
>
|
|
756
|
-
|
|
757
|
-
<span class="column-label" aria-label="${ariaLabel}">
|
|
758
|
-
${column.label}
|
|
759
|
-
</span>
|
|
760
|
-
${when(
|
|
755
|
+
${when(
|
|
761
756
|
column.sortable,
|
|
762
757
|
() => html`
|
|
758
|
+
<button
|
|
759
|
+
type="button"
|
|
760
|
+
class="column-header"
|
|
761
|
+
aria-label="${ariaLabel}"
|
|
762
|
+
aria-pressed=${isSorted}
|
|
763
|
+
@click=${() => __privateMethod(this, _handleSort, handleSort_fn).call(this, column.key)}
|
|
764
|
+
>
|
|
765
|
+
<span class="column-label">${column.label}</span>
|
|
763
766
|
<span class="sort-icon">${__privateMethod(this, _renderSortIcon, renderSortIcon_fn).call(this, column)}</span>
|
|
764
|
-
|
|
767
|
+
</button>
|
|
768
|
+
`,
|
|
769
|
+
() => html`
|
|
770
|
+
<div class="column-header">
|
|
771
|
+
<span class="column-label">${column.label}</span>
|
|
772
|
+
</div>
|
|
773
|
+
`
|
|
765
774
|
)}
|
|
766
|
-
</div>
|
|
767
775
|
</th>
|
|
768
776
|
`;
|
|
769
777
|
};
|
|
@@ -252,12 +252,31 @@ const TableStyles = css`
|
|
|
252
252
|
padding: calc(var(--table-cell-padding-y) / 2) var(--table-cell-padding-x);
|
|
253
253
|
border-radius: var(--gds-sys-radius-xs);
|
|
254
254
|
transition: all var(--gds-sys-motion-duration-fast);
|
|
255
|
+
outline-color: transparent;
|
|
256
|
+
outline-offset: -2px;
|
|
257
|
+
outline-style: solid;
|
|
258
|
+
outline-width: var(--gds-sys-space-4xs);
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
button.column-header {
|
|
262
|
+
appearance: none;
|
|
263
|
+
border: none;
|
|
264
|
+
background: transparent;
|
|
265
|
+
color: inherit;
|
|
266
|
+
font: inherit;
|
|
267
|
+
text-align: inherit;
|
|
268
|
+
inline-size: 100%;
|
|
269
|
+
cursor: pointer;
|
|
255
270
|
}
|
|
256
271
|
|
|
257
272
|
th.sortable .column-header:hover {
|
|
258
273
|
background-color: var(--_table-header-hover);
|
|
259
274
|
}
|
|
260
275
|
|
|
276
|
+
th.sortable .column-header:focus-visible {
|
|
277
|
+
outline-color: var(--gds-sys-color-content-neutral-01);
|
|
278
|
+
}
|
|
279
|
+
|
|
261
280
|
th.sortable:active .column-header {
|
|
262
281
|
background-color: var(--_table-header-active);
|
|
263
282
|
}
|