fix: web/ quick wins — CSS cleanup, ARIA tabs, and file header comments

CSS:
- Remove duplicate li::before block in app-search.css
- Fix typo: search-reuslt → search-result in app-search.css
- Remove commented-out CSS rules in app-flash.css
- Add descriptive header comment to all 27 CSS component files

JS:
- Complete WAI-ARIA Tabs pattern: generate IDs, add aria-controls on
  tab buttons and aria-labelledby on tab panels (app-tabs.js)
- Add JSDoc header comments to ~33 JS files (core + components)
- Add explanatory block comment to app-boot.js (why classic IIFE)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/css/components/app-active-filter-chips.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* Active filter chips — removable pill indicators showing applied grid filters. */
   .app-active-filters {
     margin: 0 0 0.875rem;
   }

web/css/components/app-badges.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* Badge pills — inline status/role/tag indicators with color variants. */
 .badge[role="button"],
 .badge {
   display: inline-flex;

web/css/components/app-blockquote.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* Blockquote styling — left-bordered quote blocks with accent color. */
   blockquote {
     --blockquote-bg: var(--app-blockquote-background-color);
     --blockquote-color: inherit;

web/css/components/app-brand.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* Branding — tenant logo display in sidebar and login. */
 .brand {
     display: flex;
     align-items: center;

web/css/components/app-breadcrumb.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* Breadcrumb navigation — separator-delimited path links. */
 .app-breadcrumb {
   margin-bottom: 5px;
   display: flex;

web/css/components/app-buttons.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* Action button variants — success and danger colors with outline and focus states. */
 .app-action-success:is(button, [type="submit"], [type="button"], [role="button"]) {
   --app-background-color: var(--app-action-success-background);
   --app-border-color: var(--app-action-success-border);

web/css/components/app-confirm-dialog.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* Confirm dialog — modal overlay for destructive action confirmation with danger/warning variants. */
   dialog[data-app-confirm-dialog] > article.app-confirm-dialog {
     max-width: 32rem;
   }

web/css/components/app-dashboard-titlebar.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* Dashboard title bar — welcome heading with tenant context. */
 .app-dashboard-titlebar {
     display: flex;
     align-items: center;

web/css/components/app-details-card.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* Detail cards — bordered content sections within detail pages. */
   details.app-details-card {
     margin-bottom: calc(var(--app-spacing) * 0.75);
     border: 1px solid

web/css/components/app-details-titlebar.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* Detail page title bar — sticky save/close actions with unsaved-changes indicator. */
   .app-details-titlebar {
     display: flex;
     align-items: center;

web/css/components/app-details-validation-summary.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* Validation summary — error list displayed at top of detail forms. */
   .app-details-errors {
     padding-block-start: 1rem;
   }

web/css/components/app-details.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* Detail page layout — aside panel, card sections, sticky titlebar integration. */
 .app-details-container aside {
   padding-top: var(--app-spacing);
 }

web/css/components/app-empty-state.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* Empty state placeholders — dashed border cards with icon, message, and optional action. */
   .app-empty-state {
     border: 1px dashed var(--app-empty-border-color);
     border-radius: var(--app-border-radius);

web/css/components/app-filter-drawer.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* Filter drawer — slide-in overlay panel with apply/reset/close actions and focus trap. */
   .app-visually-hidden {
     position: absolute !important;
     width: 1px !important;

web/css/components/app-flash.css

@@ -1,14 +1,12 @@
 @layer components {
+  /* Flash notices — success/warning/error/info feedback banners with auto-dismiss timer. */
 .notice {
     --app-notice-border-color: var(--app-muted-border-color);
     --app-notice-background-color: var(--app-card-background-color);
     --app-notice-accent-color: var(--app-color);
-    /* border: var(--app-border-width) solid var(--app-notice-border-color); */
-    /* border-radius: var(--app-border-radius); */
     background: var(--app-notice-background-color);
     padding: calc(var(--app-spacing) * .5) calc(var(--app-spacing) * 1);
     padding-right: calc(var(--app-spacing) * .5);
-    /* margin-bottom: var(--app-spacing); */
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -113,10 +111,6 @@
     margin: 0;
 }
 
-/* .flash-stack:has(.notice) {
-    margin-top: var(--app-spacing);
-} */
-
 .app-main-content .flash-stack {
     margin-bottom: var(--app-spacing);
 }

web/css/components/app-form-info-tile.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* Form info tile — inline help/context card within form sections. */
   .app-form-info-tiles-title {
     display: block;
     margin-bottom: calc(var(--app-spacing) * 0.55);

web/css/components/app-forms.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* Form element enhancements — validation hints, color inputs, checkbox/radio labels, disabled states. */
   .form-hint {
     font-size: small;
   }

web/css/components/app-list-table.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* List table tweaks — minor overrides for Grid.js table rendering. */
 .app-list-table table {
     margin: 0;
 }

web/css/components/app-list-tabs.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* List page tab bar — horizontal filter tabs above data grids. */
 .app-list-tabs {
   display: flex;
   flex-wrap: wrap;

web/css/components/app-list-titlebar.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* List page title bar — heading, action buttons, and breadcrumb row. */
   .app-list-titlebar {
     display: flex;
     align-items: center;

web/css/components/app-list-toolbar.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* List toolbar — page-size selector, filter toggle, and search controls above grids. */
   .app-list-toolbar {
     display: flex;
     align-items: flex-end;

web/css/components/app-page-copy.css

@@ -1,5 +1,5 @@
 @layer components {
-
+  /* Page copy block — rendered markdown content for CMS pages. */
 
 .app-page-copy .app-field {
   min-width: 200px;

web/css/components/app-page-editor.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* Page editor — Editor.js integration styles for CMS content editing. */
   .app-page-header {
     display: flex;
     align-items: center;

web/css/components/app-search.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* Global sidebar search — input, result list, preview rows, and search result cards. */
 .app-search {
     position: relative;
     padding: 0 var(--app-spacing);
@@ -83,18 +84,6 @@ ul.app-search-preview {
 .search-details-hidden ul.app-search-preview {
   display: none;
 }
-ul.app-search-preview li::before {
-    content: "";
-    position: absolute;
-    left: 17px;
-    bottom: 11px;
-    width: 8px;
-    height: 10px;
-    background: transparent;
-    border-left: 1px solid var(--app-border);
-    border-bottom: 1px solid var(--app-border);
-    border-bottom-left-radius: 6px;
-}
 
 ul.app-search-preview li {
   position: relative;
@@ -146,7 +135,7 @@ ul.app-search-preview:has(li) {
     align-items: flex-start;
 }
 
-.search-reuslt-title-container {
+.search-result-title-container {
     display: flex;
     align-items: center;
     gap: 10px;

web/css/components/app-tabs.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* Tab navigation — scrollable strip with chevron overflow, active/invalid states, no-JS fallback. */
   .app-tabs {
     display: flex;
     flex-direction: column;

web/css/components/app-tile.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* Info tiles — key-value display cards used in detail page sidebars. */
   .app-tiles {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

web/css/components/app-tooltips.css

@@ -1,4 +1,5 @@
 @layer components {
+  /* CSS-only tooltips — positioned via data-tooltip-pos with arrow indicator. */
 [data-tooltip] {
   --app-card-background-color: inherit;
   position: relative;