more templated html and work on direct bus ui

public/css/app.css

@@ -1,12 +1,12 @@
-@import url('app-nav.css');
-@import url('app-logo.css');
-@import url('app-aside.css');
-@import url('app-main.css');
+@import url("app-nav.css");
+@import url("app-logo.css");
+@import url("app-aside.css");
+@import url("app-main.css");
 
 body {
-	font-family: 'Tahoma';
+	font-family: "Tahoma";
 	/* font-family: fantasy; */
-	/* font-family: 'Brush Script MT',cursive; */
+	/* font-family: "Brush Script MT",cursive; */
 }
 
 body {

public/css/checkbox.css

@@ -1,33 +0,0 @@
-tca9548-config::part(fieldset) {
-  border: 1px solid var(--color-accent--light, red);
-  border-radius: 1em;
-  padding-inline-start: 2em;
-  padding-block: 1em;
-
-  margin-inline-end: 3em;
-
-  display: grid;
-  grid-template-columns: min-content 1fr;
-  gap: 1em;
-  justify-items: start;
-  align-items: center;
-
-  color: var(--color-accent--lighter-text);
-}
-
-tca9548-config::part(title) {
-  font-size: 1.5em;
-  font-weight: bold;
-
-  color: var(--color-accent--lighter-text);
-}
-
-
-tca9548-config::part(inputs) {
-  accent-color: var(--color-accent--light, red);
-  color: var(--color-accent--light-text, red);
-
-  display: inline-block;
-  aspect-ratio: 1;
-  width: 1.5em;
-}

public/css/defs.css

@@ -1,66 +1,66 @@
 /* @property --color-accent--h {
-	syntax: '<number>';
+	syntax: "<number>";
   initial-value: 0;
   inherits: true;
 }
 
 @property --color-accent--s {
-	syntax: '<percent>';
+	syntax: "<percent>";
   initial-value: 50%;
   inherits: true;
 }
 
 @property --color-accent--l {
-	syntax: '<percent>';
+	syntax: "<percent>";
   initial-value: 50%;
   inherits: true;
 }
 
 @property --light-percentage {
-	syntax: '<percent>';
+	syntax: "<percent>";
 	initial-value: 10%;
 	inherits: true;
 }
 
 @property --lighter-percentage {
-	syntax: '<percent>';
+	syntax: "<percent>";
 	initial-value: 30%;
 	inherits: true;
 }
 
 @property --lightest-percentage {
-	syntax: '<percent>';
+	syntax: "<percent>";
 	initial-value: 40%;
 	inherits: true;
 }
 
 
 @property --dark-percentage {
-	syntax: '<percent>';
+	syntax: "<percent>";
 	initial-value: 15%;
 	inherits: true;
 }
 
 @property --darker-percentage {
-	syntax: '<percent>';
+	syntax: "<percent>";
 	initial-value: 20%;
 	inherits: true;
 } */
 
 @property --color-accent {
-  syntax: '<color>';
+  syntax: "<color>";
   initial-value: red;
   inherits: true;
 }
 
 @property --color-white {
-  syntax: '<color>';
+  syntax: "<color>";
   initial-value: white;
   inherits: true;
 }
 
 @property --color-black {
-  syntax: '<color>';
+  syntax: "<color>";
   initial-value: black;
   inherits: true;
 }

public/css/excamera-i2cdriver.css

@@ -4,6 +4,51 @@ excamera-i2cdriver {
 	flex-direction: column;
 	height: 100%;
 
+	& table {
+		/* display: grid; */
+
+		border-radius: 1em;
+		background-color: var(--color-accent--dark, red);
+		color: var(--color-accent--dark-text, red);
+
+		border-collapse: collapse;
+
+		& thead {
+
+			& th {
+				padding-inline: 4ch;
+				padding-block: 1em;
+
+				background-color: var(--color-accent--lighter, red);
+				color: var(--color-accent--lighter-text, red);
+
+				&:first-child {
+					border-start-start-radius: 1em;
+				}
+
+				&:last-child {
+					border-start-end-radius: 1em;
+				}
+			}
+		}
+
+		& tbody {
+			overflow-block: scroll;
+			max-height: fit-content;
+
+
+			& td {
+				padding: 1em;
+			}
+		}
+	}
+
+	& [data-for-tab="direct"] {
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+	}
+
 	& form[data-config] {
 		display: flex;
 		flex-grow: 1;
@@ -22,6 +67,12 @@ excamera-i2cdriver {
 		color: var(--color-accent--lighter-text, red);
 	}
 
+	& form[data-direct] {
+		display: flex;
+		flex-direction: row;
+		gap: 0.5em;
+	}
+
 	/* & div.tabsContent select {
     background-color: pink;
     color: black;
@@ -214,7 +265,7 @@ excamera-i2cdriver {
 				color: var(--color-accent--lighter-text, red);
 
 				&::after {
-					content: 'Z';
+					content: "Z";
 					display: flex;
 				}
 			}
@@ -224,7 +275,7 @@ excamera-i2cdriver {
 				color: var(--color-accent--lighter-text, red);
 
 				&::after {
-					content: 'Z';
+					content: "Z";
 					display: flex;
 				}
 			}
@@ -238,7 +289,7 @@ excamera-i2cdriver {
 					width: 2em;
 					height: 2em;
 					border-radius: 1em;
-					content: 'S';
+					content: "S";
 					align-items: center;
 					justify-content: center;
 				}
@@ -254,7 +305,7 @@ excamera-i2cdriver {
 					width: 2em;
 					height: 2em;
 					border-radius: 1em;
-					content: 'P';
+					content: "P";
 					align-items: center;
 					justify-content: center;
 				}
@@ -278,11 +329,11 @@ excamera-i2cdriver {
 				}
 
 				&[data-mode="read"]::before {
-					content: '◀';
+					content: "◀";
 				}
 
 				&[data-mode="write"]::before {
-					content: '▶';
+					content: "▶";
 				}
 
 				&::after {
@@ -291,7 +342,7 @@ excamera-i2cdriver {
 					bottom: 0.25em;
 					width: 1em;
 					height: 1em;
-					content: '●';
+					content: "●";
 					color: red;
 				}
 
@@ -315,7 +366,7 @@ excamera-i2cdriver {
 					bottom: 0.25em;
 					width: 1em;
 					height: 1em;
-					content: '●';
+					content: "●";
 					color: red;
 				}
 
@@ -325,7 +376,7 @@ excamera-i2cdriver {
 					bottom: 0.25em;
 					width: 1em;
 					height: 1em;
-					content: '●';
+					content: "●";
 
 					color: green;
 				}

public/css/pcf8574.css

@@ -2,13 +2,14 @@ pcf8574-config {
 	display: flex;
 	gap: 1em;
 	align-items: start;
+	margin-block-start: 2em;
 
 	& > form {
 		display: grid;
-		grid-template-columns: 1fr 1fr 1fr;
+		grid-template-columns: 1fr 1fr 2fr;
 
 		gap: 1em;
-		align-items: baseline;
+		align-items: center;
     justify-items: stretch;
 
     margin-inline-start: 1em;
@@ -17,6 +18,20 @@ pcf8574-config {
 		background-color: var(--color-accent--lightest, red);
 		border-radius: 1em;
 
+		& input[type="checkbox"] {
+			accent-color: var(--color-accent--darker, red);
+			width: 1.25em;
+			height: 1.25em;
+			margin: 0.5em;
+		}
+
+		& output[name ^= "gpio"] {
+			transition: transform 1s;
+		}
+		& output[name ^= "gpio"][data-high] {
+
+			transform: translate(2em, 0);
+		}
 	}
 
 

public/css/range.css

@@ -20,7 +20,7 @@ input[type="number"]:where(:focus-visible, :focus) {
 	outline-width: 5px;
 
 
-  /* color override isn't -text based */
+  /* color override is not -text based */
   background-color: var(--color-white, red);
   color: var(--color-black, red);
   /*  */

public/css/tca9548.css

@@ -0,0 +1,44 @@
+tca9548-config {
+	margin-inline-end: 2em;
+
+  & form {
+
+		& fieldset {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 2em;
+
+			padding: 1em;
+			padding-inline-start: 2em;
+
+			margin-block-end: 1em;
+			border-radius: 1em;
+			border-color: var(--color-accent--darker, red);
+
+			& label[data-nested] {
+				display: flex;
+				gap: 1em;
+    		align-items: center;
+
+				background-color: var(--color-accent--lightest, red);
+				color: var(--color-accent--lightest-text, red);
+
+				padding: 0.5em;
+				padding-inline: 1em;
+				border-radius: 0.5em;
+			}
+
+			& legend:not(:empty) {
+				font-weight: bold;
+				padding-inline: 1ch;
+			}
+		}
+
+		& input[type="checkbox"] {
+			accent-color: var(--color-accent--darker, red);
+			width: 1.25em;
+			height: 1.25em;
+			margin: 0.5em;
+		}
+	}
+}