@jsekulowicz/ds-components 0.9.7 → 0.9.8
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
CHANGED
|
@@ -6625,7 +6625,7 @@
|
|
|
6625
6625
|
{
|
|
6626
6626
|
"kind": "variable",
|
|
6627
6627
|
"name": "tablePaginationStyles",
|
|
6628
|
-
"default": "css` :host { display: flex; align-items: center; justify-content: space-between; column-gap: var(--ds-space-4); row-gap: var(--ds-space-3); flex-wrap: wrap; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); } nav { display: flex; align-items: center; gap: var(--ds-space-2); } .list { display: flex; align-items: center; gap: var(--ds-space-2); list-style: none; padding: 0; margin: 0; } button { min-width: 2rem; height: 2rem; padding: 0 var(--ds-space-2); background: transparent; color: var(--ds-color-fg); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-1); } button:hover:not(:disabled) { background: var(--ds-color-bg-muted); } button:focus-visible { outline: 2px solid var(--ds-color-focus); outline-offset: 2px; } button:disabled { color: var(--ds-color-fg-subtle); cursor: not-allowed; opacity: 0.6; } button[aria-current=\"page\"] { background: var(--ds-color-accent); color: var(--ds-color-accent-fg); border-color: var(--ds-color-accent); } .ellipsis { display: inline-flex; min-width: 2rem; justify-content: center; color: var(--ds-color-fg-muted); } .size { display: inline-flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-color-fg-muted); } select { padding: var(--ds-space-1) var(--ds-space-2); background: var(--ds-color-bg); color: var(--ds-color-fg); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); font: inherit; } .summary { color: var(--ds-color-fg-muted); } svg { width: 1em; height: 1em; } /* Compact mode is driven by the host's [compact] attribute, which ds-table-pagination toggles automatically via ResizeObserver when the host is narrower than ~480px. We hide the Previous / Next text label here so the buttons collapse to icons; the page-number range shrinks via the JS path (maxVisiblePages → 3, siblingCount → 0). The slot itself stays in the DOM so consumer overrides via ::part(prev-next-label) still work if labels are wanted even when compact. */ :host([compact]) .label { display: none; } `"
|
|
6628
|
+
"default": "css` :host { display: flex; align-items: center; justify-content: space-between; column-gap: var(--ds-space-4); row-gap: var(--ds-space-3); flex-wrap: wrap; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); } nav { display: flex; align-items: center; gap: var(--ds-space-2); } .list { display: flex; align-items: center; gap: var(--ds-space-2); list-style: none; padding: 0; margin: 0; } button { min-width: 2rem; height: 2rem; padding: 0 var(--ds-space-2); background: transparent; color: var(--ds-color-fg); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-1); } button:hover:not(:disabled) { background: var(--ds-color-bg-muted); } button:focus-visible { outline: 2px solid var(--ds-color-focus); outline-offset: 2px; } button:disabled { color: var(--ds-color-fg-subtle); cursor: not-allowed; opacity: 0.6; } button[aria-current=\"page\"] { background: var(--ds-color-accent); color: var(--ds-color-accent-fg); border-color: var(--ds-color-accent); } /* Without this override the generic button:hover:not(:disabled) rule wins on specificity (it carries an extra :not pseudo-class) and the current-page button briefly flashes back to the muted surface colour on hover. Keep the active button on-brand by stepping to the accent-hover token instead. */ button[aria-current=\"page\"]:hover:not(:disabled) { background: var(--ds-color-accent-hover); border-color: var(--ds-color-accent-hover); } .ellipsis { display: inline-flex; min-width: 2rem; justify-content: center; color: var(--ds-color-fg-muted); } .size { display: inline-flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-color-fg-muted); } select { padding: var(--ds-space-1) var(--ds-space-2); background: var(--ds-color-bg); color: var(--ds-color-fg); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); font: inherit; } .summary { color: var(--ds-color-fg-muted); } svg { width: 1em; height: 1em; } /* Compact mode is driven by the host's [compact] attribute, which ds-table-pagination toggles automatically via ResizeObserver when the host is narrower than ~480px. We hide the Previous / Next text label here so the buttons collapse to icons; the page-number range shrinks via the JS path (maxVisiblePages → 3, siblingCount → 0). The slot itself stays in the DOM so consumer overrides via ::part(prev-next-label) still work if labels are wanted even when compact. */ :host([compact]) .label { display: none; } `"
|
|
6629
6629
|
}
|
|
6630
6630
|
],
|
|
6631
6631
|
"exports": [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-pagination.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-pagination.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,
|
|
1
|
+
{"version":3,"file":"table-pagination.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-pagination.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,yBAiHjC,CAAC"}
|
|
@@ -59,6 +59,15 @@ export const tablePaginationStyles = css `
|
|
|
59
59
|
color: var(--ds-color-accent-fg);
|
|
60
60
|
border-color: var(--ds-color-accent);
|
|
61
61
|
}
|
|
62
|
+
/* Without this override the generic button:hover:not(:disabled)
|
|
63
|
+
rule wins on specificity (it carries an extra :not pseudo-class)
|
|
64
|
+
and the current-page button briefly flashes back to the muted
|
|
65
|
+
surface colour on hover. Keep the active button on-brand by
|
|
66
|
+
stepping to the accent-hover token instead. */
|
|
67
|
+
button[aria-current="page"]:hover:not(:disabled) {
|
|
68
|
+
background: var(--ds-color-accent-hover);
|
|
69
|
+
border-color: var(--ds-color-accent-hover);
|
|
70
|
+
}
|
|
62
71
|
|
|
63
72
|
.ellipsis {
|
|
64
73
|
display: inline-flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-pagination.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table-pagination.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"table-pagination.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table-pagination.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiHvC,CAAC"}
|
package/package.json
CHANGED