Add Treegrid Example

examples/treegrid/css/treegrid-1.css

@@ -0,0 +1,103 @@
+#treegrid {
+  width: 100%;
+  white-space: nowrap;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+#treegrid tr {
+  display: table-row;
+  cursor: default;
+}
+
+#treegrid tbody td {
+  cursor: default;
+}
+
+#treegrid-col1, #treegrid-col3 {
+  width: 30%;
+}
+
+#treegrid th {
+  text-align: left;
+  background-color: #eee;
+}
+
+/* Extra space between columns for readability */
+#treegrid th, #treegrid td {
+  padding-bottom: 3px;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+
+#treegrid tr > td:not(:first-child),
+#treegrid tr > th:not(:first-child) {
+  padding-left: 3ch;
+}
+
+#treegrid a {
+  padding-left: .25ch;
+  padding-right: .25ch;
+}
+
+#treegrid tr:focus,
+#treegrid td:focus,
+#treegrid a:focus {
+  outline: 2px solid hsl(216, 94%, 70%);
+  background-color: hsl(216, 80%, 97%);
+}
+
+#treegrid a:focus {
+  border-bottom: none;
+}
+
+/* Hide collapsed rows */
+#treegrid tr.hidden {
+  display: none;
+}
+
+/* Indents */
+#treegrid tr[aria-level="2"] > td:first-child {
+  padding-left: 2.5ch;
+}
+#treegrid tr[aria-level="3"] > td:first-child {
+  padding-left: 5ch;
+}
+#treegrid tr[aria-level="4"] > td:first-child {
+  padding-left: 7.5ch;
+}
+#treegrid tr[aria-level="5"] > td:first-child {
+  padding-left: 10ch;
+}
+
+
+/* Collapse/expand icons */
+#treegrid tr > td:first-child::before {
+  font-family: monospace;
+  content: " ";
+  display: inline-block;
+  width: 2ch;
+  height: 11px;
+  transition: transform .3s;
+  transform-origin: 5px 5px;
+}
+
+#treegrid tr[aria-expanded] > td:first-child::before,
+#treegrid td[aria-expanded]:first-child::before {
+  cursor: pointer;
+  /* Load both right away so there is no lag when we need the other */
+  background-image: url("expand-icon.svg"), url("expand-icon-highlighted.svg");
+  background-repeat: no-repeat;
+}
+
+#treegrid tr[aria-expanded]:focus > td:first-child::before,
+#treegrid tr[aria-expanded] > td:focus:first-child::before,
+#treegrid tr:focus > td[aria-expanded]:first-child::before,
+#treegrid tr > td[aria-expanded]:focus:first-child::before {
+  background-image: url("expand-icon-highlighted.svg");
+}
+
+#treegrid tr[aria-expanded="true"] > td:first-child::before,
+#treegrid td[aria-expanded="true"]:first-child::before {
+  transform: rotate(90deg);
+}