baseline

web/css/components/app-tabs.css

@@ -0,0 +1,53 @@
+:root {
+  --tabs-border: var(--app-border);
+  --tabs-active: var(--app-primary);
+  --tabs-muted: var(--app-muted-color);
+}
+
+.app-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--app-spacing);
+}
+
+.app-tabs-nav {
+    display: flex;
+    border-bottom: 1px solid var(--tabs-border);
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    padding-block-start: 2px;
+    padding-left: 2px;
+}
+
+.app-tabs-nav button,
+.app-tabs-nav a {
+  background: transparent;
+  border: 0;
+  padding: 5px 10px 5px 10px;
+  color: var(--tabs-muted) !important;
+  cursor: pointer;
+  font-weight: 500;
+  border-bottom: 2px solid transparent;
+  text-decoration: none;
+  border-radius: 0;
+  margin-bottom: 0;
+}
+
+.app-tabs-nav button:hover,
+.app-tabs-nav button:focus-visible,
+.app-tabs-nav a:hover,
+.app-tabs-nav a:focus-visible {
+  --app-color: inherit;
+  color: var(--app-color) !important;
+}
+
+.app-tabs-nav button.is-active,
+.app-tabs-nav a.is-active {
+  --app-color: inherit;
+  color: var(--app-color) !important;
+  border-color: var(--tabs-active);
+}
+
+[data-tab-panel][hidden] {
+  display: none;
+}