@nl-rvo/css-table 1.5.0 → 1.7.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 CHANGED
@@ -1,5 +1,17 @@
1
1
  # `@nl-rvo/css-table`
2
2
 
3
+ ## 1.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 09b1d14: Change vertical alignment to `baseline` for `.rvo-table-cell`.
8
+
9
+ ## 1.6.0
10
+
11
+ ### Minor Changes
12
+
13
+ - 8d7dddf: Table column headers are now buttons and be able to be read and interactived with through screenreaders
14
+
3
15
  ## 1.5.0
4
16
 
5
17
  ### Minor Changes
package/dist/index.css CHANGED
@@ -37,12 +37,16 @@
37
37
 
38
38
  .rvo-table-header__sortable-container {
39
39
  align-items: center;
40
+ background: none;
41
+ border: none;
42
+ cursor: pointer;
40
43
  display: flex;
44
+ font-weight: var(--rvo-table-header-font-weight);
41
45
  gap: var(--rvo-space-sm);
42
46
  }
43
47
 
44
48
  .rvo-table-header__sortable-container--numeric {
45
- justify-content: end;
49
+ float: right;
46
50
  }
47
51
 
48
52
  .rvo-table-header__sortable-button {
@@ -66,7 +70,6 @@
66
70
 
67
71
  .rvo-table-header--sortable:hover {
68
72
  background-color: var(--rvo-table-header-sortable-hover-background-color);
69
- cursor: pointer;
70
73
  }
71
74
 
72
75
  .rvo-table-header--sortable:focus {
@@ -82,6 +85,7 @@
82
85
  padding-block-start: var(--rvo-table-cell-padding-block-start);
83
86
  padding-inline-end: var(--rvo-table-cell-padding-inline-end);
84
87
  padding-inline-start: var(--rvo-table-cell-padding-inline-start);
88
+ vertical-align: baseline;
85
89
  }
86
90
 
87
91
  .rvo-table-cell--numeric,
@@ -1 +1 @@
1
- .rvo-table{border-collapse:collapse;border-spacing:0;table-layout:fixed;width:100%}.rvo-table--responsive{overflow-x:auto;width:100%}.rvo-caption{font-size:var(--rvo-caption-font-size);padding-block-end:var(--rvo-caption-padding-block-end);text-align:start}.rvo-table-header{background-color:var(--rvo-table-header-background-color);border-bottom:var(--rvo-table-header-border-bottom-width) var(--rvo-table-header-border-bottom-style) var(--rvo-table-header-border-bottom-color);color:var(--rvo-table-header-color);font-weight:var(--rvo-table-header-font-weight);padding-block-end:var(--rvo-table-header-padding-block-end);padding-block-start:var(--rvo-table-header-padding-block-start);padding-inline-end:var(--rvo-table-header-padding-inline-end);padding-inline-start:var(--rvo-table-header-padding-inline-start);text-align:start}.rvo-table-header__sortable-container{align-items:center;display:flex;gap:var(--rvo-space-sm)}.rvo-table-header__sortable-container--numeric{justify-content:end}.rvo-table-header__sortable-button{min-inline-size:0;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0}.rvo--table-header__sorting-icon{display:flex;height:var(--rvo-icon-md-height);width:var(--rvo-icon-md-width)}.rvo-table-header--active-sort{text-decoration:var(--_rvo-table-header-color,underline);text-underline-offset:30%}.rvo-table-header--sortable:hover{background-color:var(--rvo-table-header-sortable-hover-background-color);cursor:pointer}.rvo-table-header--sortable:focus{background-color:var(--rvo-table-header-sortable-focus-background-color)}.rvo-table-cell{border-bottom:var(--rvo-table-cell-border-bottom-width) var(--rvo-table-cell-border-bottom-style) var(--rvo-table-cell-border-bottom-color);overflow-wrap:break-word;padding-block-end:var(--rvo-table-cell-padding-block-end);padding-block-start:var(--rvo-table-cell-padding-block-start);padding-inline-end:var(--rvo-table-cell-padding-inline-end);padding-inline-start:var(--rvo-table-cell-padding-inline-start)}.rvo-table-cell--numeric,.rvo-table-header--numeric{text-align:end}.rvo-table-header--xs{width:var(--rvo-table-header-size-xs)}.rvo-table-header--sm{width:var(--rvo-table-header-size-sm)}.rvo-table-header--md{width:var(--rvo-table-header-size-md)}.rvo-table-header--lg{width:var(--rvo-table-header-size-lg)}.rvo-table-header--xl{width:var(--rvo-table-header-size-xl)}
1
+ .rvo-table{border-collapse:collapse;border-spacing:0;table-layout:fixed;width:100%}.rvo-table--responsive{overflow-x:auto;width:100%}.rvo-caption{font-size:var(--rvo-caption-font-size);padding-block-end:var(--rvo-caption-padding-block-end);text-align:start}.rvo-table-header{background-color:var(--rvo-table-header-background-color);border-bottom:var(--rvo-table-header-border-bottom-width) var(--rvo-table-header-border-bottom-style) var(--rvo-table-header-border-bottom-color);color:var(--rvo-table-header-color);font-weight:var(--rvo-table-header-font-weight);padding-block-end:var(--rvo-table-header-padding-block-end);padding-block-start:var(--rvo-table-header-padding-block-start);padding-inline-end:var(--rvo-table-header-padding-inline-end);padding-inline-start:var(--rvo-table-header-padding-inline-start);text-align:start}.rvo-table-header__sortable-container{align-items:center;background:none;border:none;cursor:pointer;display:flex;font-weight:var(--rvo-table-header-font-weight);gap:var(--rvo-space-sm)}.rvo-table-header__sortable-container--numeric{float:right}.rvo-table-header__sortable-button{min-inline-size:0;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0}.rvo--table-header__sorting-icon{display:flex;height:var(--rvo-icon-md-height);width:var(--rvo-icon-md-width)}.rvo-table-header--active-sort{text-decoration:var(--_rvo-table-header-color,underline);text-underline-offset:30%}.rvo-table-header--sortable:hover{background-color:var(--rvo-table-header-sortable-hover-background-color)}.rvo-table-header--sortable:focus{background-color:var(--rvo-table-header-sortable-focus-background-color)}.rvo-table-cell{border-bottom:var(--rvo-table-cell-border-bottom-width) var(--rvo-table-cell-border-bottom-style) var(--rvo-table-cell-border-bottom-color);overflow-wrap:break-word;padding-block-end:var(--rvo-table-cell-padding-block-end);padding-block-start:var(--rvo-table-cell-padding-block-start);padding-inline-end:var(--rvo-table-cell-padding-inline-end);padding-inline-start:var(--rvo-table-cell-padding-inline-start);vertical-align:baseline}.rvo-table-cell--numeric,.rvo-table-header--numeric{text-align:end}.rvo-table-header--xs{width:var(--rvo-table-header-size-xs)}.rvo-table-header--sm{width:var(--rvo-table-header-size-sm)}.rvo-table-header--md{width:var(--rvo-table-header-size-md)}.rvo-table-header--lg{width:var(--rvo-table-header-size-lg)}.rvo-table-header--xl{width:var(--rvo-table-header-size-xl)}
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export default ".rvo-table{border-collapse:collapse;border-spacing:0;table-layout:fixed;width:100%}.rvo-table--responsive{overflow-x:auto;width:100%}.rvo-caption{font-size:var(--rvo-caption-font-size);padding-block-end:var(--rvo-caption-padding-block-end);text-align:start}.rvo-table-header{background-color:var(--rvo-table-header-background-color);border-bottom:var(--rvo-table-header-border-bottom-width) var(--rvo-table-header-border-bottom-style) var(--rvo-table-header-border-bottom-color);color:var(--rvo-table-header-color);font-weight:var(--rvo-table-header-font-weight);padding-block-end:var(--rvo-table-header-padding-block-end);padding-block-start:var(--rvo-table-header-padding-block-start);padding-inline-end:var(--rvo-table-header-padding-inline-end);padding-inline-start:var(--rvo-table-header-padding-inline-start);text-align:start}.rvo-table-header__sortable-container{align-items:center;display:flex;gap:var(--rvo-space-sm)}.rvo-table-header__sortable-container--numeric{justify-content:end}.rvo-table-header__sortable-button{min-inline-size:0;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0}.rvo--table-header__sorting-icon{display:flex;height:var(--rvo-icon-md-height);width:var(--rvo-icon-md-width)}.rvo-table-header--active-sort{text-decoration:var(--_rvo-table-header-color,underline);text-underline-offset:30%}.rvo-table-header--sortable:hover{background-color:var(--rvo-table-header-sortable-hover-background-color);cursor:pointer}.rvo-table-header--sortable:focus{background-color:var(--rvo-table-header-sortable-focus-background-color)}.rvo-table-cell{border-bottom:var(--rvo-table-cell-border-bottom-width) var(--rvo-table-cell-border-bottom-style) var(--rvo-table-cell-border-bottom-color);overflow-wrap:break-word;padding-block-end:var(--rvo-table-cell-padding-block-end);padding-block-start:var(--rvo-table-cell-padding-block-start);padding-inline-end:var(--rvo-table-cell-padding-inline-end);padding-inline-start:var(--rvo-table-cell-padding-inline-start)}.rvo-table-cell--numeric,.rvo-table-header--numeric{text-align:end}.rvo-table-header--xs{width:var(--rvo-table-header-size-xs)}.rvo-table-header--sm{width:var(--rvo-table-header-size-sm)}.rvo-table-header--md{width:var(--rvo-table-header-size-md)}.rvo-table-header--lg{width:var(--rvo-table-header-size-lg)}.rvo-table-header--xl{width:var(--rvo-table-header-size-xl)}";
1
+ export default ".rvo-table{border-collapse:collapse;border-spacing:0;table-layout:fixed;width:100%}.rvo-table--responsive{overflow-x:auto;width:100%}.rvo-caption{font-size:var(--rvo-caption-font-size);padding-block-end:var(--rvo-caption-padding-block-end);text-align:start}.rvo-table-header{background-color:var(--rvo-table-header-background-color);border-bottom:var(--rvo-table-header-border-bottom-width) var(--rvo-table-header-border-bottom-style) var(--rvo-table-header-border-bottom-color);color:var(--rvo-table-header-color);font-weight:var(--rvo-table-header-font-weight);padding-block-end:var(--rvo-table-header-padding-block-end);padding-block-start:var(--rvo-table-header-padding-block-start);padding-inline-end:var(--rvo-table-header-padding-inline-end);padding-inline-start:var(--rvo-table-header-padding-inline-start);text-align:start}.rvo-table-header__sortable-container{align-items:center;background:none;border:none;cursor:pointer;display:flex;font-weight:var(--rvo-table-header-font-weight);gap:var(--rvo-space-sm)}.rvo-table-header__sortable-container--numeric{float:right}.rvo-table-header__sortable-button{min-inline-size:0;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0}.rvo--table-header__sorting-icon{display:flex;height:var(--rvo-icon-md-height);width:var(--rvo-icon-md-width)}.rvo-table-header--active-sort{text-decoration:var(--_rvo-table-header-color,underline);text-underline-offset:30%}.rvo-table-header--sortable:hover{background-color:var(--rvo-table-header-sortable-hover-background-color)}.rvo-table-header--sortable:focus{background-color:var(--rvo-table-header-sortable-focus-background-color)}.rvo-table-cell{border-bottom:var(--rvo-table-cell-border-bottom-width) var(--rvo-table-cell-border-bottom-style) var(--rvo-table-cell-border-bottom-color);overflow-wrap:break-word;padding-block-end:var(--rvo-table-cell-padding-block-end);padding-block-start:var(--rvo-table-cell-padding-block-start);padding-inline-end:var(--rvo-table-cell-padding-inline-end);padding-inline-start:var(--rvo-table-cell-padding-inline-start);vertical-align:baseline}.rvo-table-cell--numeric,.rvo-table-header--numeric{text-align:end}.rvo-table-header--xs{width:var(--rvo-table-header-size-xs)}.rvo-table-header--sm{width:var(--rvo-table-header-size-sm)}.rvo-table-header--md{width:var(--rvo-table-header-size-md)}.rvo-table-header--lg{width:var(--rvo-table-header-size-lg)}.rvo-table-header--xl{width:var(--rvo-table-header-size-xl)}";
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.5.0",
2
+ "version": "1.7.0",
3
3
  "author": "Community for NL Design System",
4
4
  "license": "CC0-1.0",
5
5
  "name": "@nl-rvo/css-table",
@@ -25,7 +25,7 @@
25
25
  "directory": "components/table"
26
26
  },
27
27
  "devDependencies": {
28
- "@nl-rvo/build-utils-css": "0.0.1"
28
+ "@nl-rvo/build-utils-css": "0.1.0"
29
29
  },
30
30
  "scripts": {
31
31
  "build": "build-css-package",
package/src/index.scss CHANGED
@@ -38,12 +38,16 @@
38
38
 
39
39
  .rvo-table-header__sortable-container {
40
40
  align-items: center;
41
+ background: none;
42
+ border: none;
43
+ cursor: pointer;
41
44
  display: flex;
45
+ font-weight: var(--rvo-table-header-font-weight);
42
46
  gap: var(--rvo-space-sm);
43
47
  }
44
48
 
45
49
  .rvo-table-header__sortable-container--numeric {
46
- justify-content: end;
50
+ float: right;
47
51
  }
48
52
 
49
53
  .rvo-table-header__sortable-button {
@@ -67,7 +71,6 @@
67
71
 
68
72
  .rvo-table-header--sortable:hover {
69
73
  background-color: var(--rvo-table-header-sortable-hover-background-color);
70
- cursor: pointer;
71
74
  }
72
75
 
73
76
  .rvo-table-header--sortable:focus {
@@ -83,6 +86,7 @@
83
86
  padding-block-start: var(--rvo-table-cell-padding-block-start);
84
87
  padding-inline-end: var(--rvo-table-cell-padding-inline-end);
85
88
  padding-inline-start: var(--rvo-table-cell-padding-inline-start);
89
+ vertical-align: baseline;
86
90
  }
87
91
 
88
92
  .rvo-table-cell--numeric,