@rcarls/rc-app-bar 0.1.0

package/dist/custom-elements.json

@@ -0,0 +1,582 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/define.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "rc-app-bar",
+          "declaration": {
+            "name": "RCAppBar",
+            "module": "/src/index.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/index.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/rc-app-bar"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/rc-app-bar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A headless app bar with leading, title, exact-center, and trailing regions.\n\nThe element carries no landmark role. Consumers provide all controls and\nicons, and wrap page-level instances in `<header>` when a banner landmark is\nappropriate.\n\nScrolled state is dual-mode. Uncontrolled: set `scrollTarget` (or the\n`scroll-target` selector attribute) and the bar observes the container.\nControlled: assign `scrolled`; assigning `undefined` releases observation.\nHost writes are silent.",
+          "name": "RCAppBar",
+          "cssProperties": [
+            {
+              "description": "Bar background",
+              "name": "--rc-app-bar-bg",
+              "default": "Canvas"
+            },
+            {
+              "description": "Bar text color",
+              "name": "--rc-app-bar-color",
+              "default": "CanvasText"
+            },
+            {
+              "description": "Compact row minimum height",
+              "name": "--rc-app-bar-compact-min-height",
+              "default": "3rem"
+            },
+            {
+              "description": "Expanded title padding",
+              "name": "--rc-app-bar-expanded-padding-block",
+              "default": "0.75em"
+            },
+            {
+              "description": "Horizontal padding",
+              "name": "--rc-app-bar-padding-inline",
+              "default": "0.75em"
+            },
+            {
+              "description": "Gap between regions",
+              "name": "--rc-app-bar-gap",
+              "default": "0.5em"
+            },
+            {
+              "description": "Endpoint and hide duration",
+              "name": "--rc-app-bar-transition-duration",
+              "default": "200ms"
+            },
+            {
+              "description": "Scrolled divider",
+              "name": "--rc-app-bar-scroll-divider",
+              "default": "1px solid GrayText"
+            },
+            {
+              "description": "Collapse animation progress 0–1; read-only",
+              "name": "--rc-app-bar-collapse-progress",
+              "default": "0"
+            },
+            {
+              "description": "Compact-row title font size (opt-in; inherits when unset)",
+              "name": "--rc-app-bar-title-font-size"
+            },
+            {
+              "description": "Expanded-row title font size (opt-in)",
+              "name": "--rc-app-bar-expanded-title-font-size"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The grid container",
+              "name": "root"
+            },
+            {
+              "description": "Wrapper around the leading slot",
+              "name": "leading"
+            },
+            {
+              "description": "Wrapper around the single title slot",
+              "name": "title"
+            },
+            {
+              "description": "Wrapper around the centered slot",
+              "name": "center"
+            },
+            {
+              "description": "Wrapper around the trailing slot",
+              "name": "trailing"
+            },
+            {
+              "description": "Scrolled-state separator",
+              "name": "scroll-shadow"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Leading navigation or controls; accepts multiple children",
+              "name": "leading"
+            },
+            {
+              "description": "The single title region; may contain title and subtitle markup",
+              "name": ""
+            },
+            {
+              "description": "Content kept at the exact horizontal center, such as search",
+              "name": "center"
+            },
+            {
+              "description": "Trailing action controls",
+              "name": "trailing"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "RCAppBarVariant"
+              },
+              "default": "'compact'",
+              "description": "Structural variant. `expanded` adds a flexible title row.",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "scrollBehavior",
+              "type": {
+                "text": "RCAppBarScrollBehavior"
+              },
+              "default": "'pinned'",
+              "description": "Visual response to observed scrolling.",
+              "attribute": "scroll-behavior",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "scrollTarget",
+              "type": {
+                "text": "ScrollObserverTarget | string | null"
+              },
+              "default": "null",
+              "description": "Scroll container to observe. The attribute accepts a CSS selector or\n`window`; the property also accepts an element, document, or window.",
+              "attribute": "scroll-target"
+            },
+            {
+              "kind": "field",
+              "name": "scrollThreshold",
+              "type": {
+                "text": "number"
+              },
+              "default": "4",
+              "description": "Scroll offset in px past which the bar is scrolled (strict `>`).",
+              "attribute": "scroll-threshold"
+            },
+            {
+              "kind": "field",
+              "name": "_scrolled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "privacy": "private",
+              "default": "undefined"
+            },
+            {
+              "kind": "field",
+              "name": "_observedScrolled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_hasLeading",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_hasCenter",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_hasTrailing",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_collapsed",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_hidden",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_collapseDistance",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_collapseOffsetDistance",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_collapseProgress",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_reducedMotion",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_internals",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_resizeObserver",
+              "type": {
+                "text": "ResizeObserver | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_scroll",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new ScrollObserverController(this, { target: () => this._resolveScrollTarget(), threshold: this.scrollThreshold, disabled: true, onChange: (scrolled) => { this._observedScrolled = scrolled; this._syncVisualState(); this.dispatchEvent( new CustomEvent<RCAppBarScrollDetail>('rc-app-bar-scroll', { bubbles: true, composed: true, detail: { scrolled }, }), ); }, onScroll: (scrollTop, delta) => this._onObservedScroll(scrollTop, delta), })"
+            },
+            {
+              "kind": "field",
+              "name": "scrolled",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the bar is past its scroll threshold. Host writes are silent and\ncontrolled; assigning `undefined` releases observation."
+            },
+            {
+              "kind": "field",
+              "name": "collapsed",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the expanded title row is currently collapsed.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_connectResizeObserver",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_observeLayout",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_measureLayout",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_syncScrollObserver",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_resolveScrollTarget",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ScrollObserverTarget | null"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_onObservedScroll",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "scrollTop",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "delta",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_syncVisualState",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_setCollapseProgress",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "progress",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_applyCollapseGeometry",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_setHidden",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "hidden",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_syncStateOutputs",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_setCustomState",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "active",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "description": "When observed scroll state crosses the threshold; `detail: { scrolled }`",
+              "name": "rc-app-bar-scroll"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "RCAppBarVariant"
+              },
+              "default": "'compact'",
+              "description": "Structural variant. `expanded` adds a flexible title row.",
+              "fieldName": "variant"
+            },
+            {
+              "name": "scroll-behavior",
+              "type": {
+                "text": "RCAppBarScrollBehavior"
+              },
+              "default": "'pinned'",
+              "description": "Visual response to observed scrolling.",
+              "fieldName": "scrollBehavior"
+            },
+            {
+              "name": "scroll-target",
+              "type": {
+                "text": "ScrollObserverTarget | string | null"
+              },
+              "default": "null",
+              "description": "Scroll container to observe. The attribute accepts a CSS selector or\n`window`; the property also accepts an element, document, or window.",
+              "fieldName": "scrollTarget"
+            },
+            {
+              "name": "scroll-threshold",
+              "type": {
+                "text": "number"
+              },
+              "default": "4",
+              "description": "Scroll offset in px past which the bar is scrolled (strict `>`).",
+              "fieldName": "scrollThreshold"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "rc-app-bar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RCAppBar",
+          "declaration": {
+            "name": "RCAppBar",
+            "module": "src/rc-app-bar.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "RCAppBar",
+            "module": "src/rc-app-bar.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/demo.css

@@ -0,0 +1,85 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+:root {
+  color-scheme: light dark;
+  --rc-accent: Highlight; /* Chrome doesn't support AccentColor on the open web */
+}
+
+@supports (color: AccentColor) {
+  :root {
+    --rc-accent: AccentColor;
+  }
+}
+
+[data-theme="light"] { color-scheme: light; }
+[data-theme="dark"]  { color-scheme: dark;  }
+
+[data-theme="solarized-light"] {
+  color-scheme: light;
+  --rc-surface: #fdf6e3;
+  --rc-text:    #657b83;
+  --rc-border:  1px solid #93a1a1;
+  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .12);
+}
+
+[data-theme="solarized-dark"] {
+  color-scheme: dark;
+  --rc-surface: #002b36;
+  --rc-text:    #839496;
+  --rc-border:  1px solid #586e75;
+  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .3);
+}
+
+body {
+  font-family: system-ui, sans-serif;
+  margin: 0;
+}
+
+.demo-page {
+  max-width: 60rem;
+  margin: 0 auto;
+  padding: 2rem 1.5rem;
+}
+
+.demo-controls {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid ButtonBorder;
+}
+
+.demo-controls .demo-title {
+  flex: 1;
+}
+
+.demo-controls h1 {
+  margin: 0 0 0.15rem;
+  font-size: 1.5rem;
+}
+
+.demo-controls a {
+  font-size: 0.8rem;
+}
+
+.demo-section {
+  margin-bottom: 2rem;
+}
+
+.demo-section h2 {
+  margin: 0 0 0.5rem;
+}
+
+.theme-picker {
+  padding: 0.35em 0.75em;
+  font-family: inherit;
+  font-size: 0.8rem;
+  cursor: pointer;
+  border: 1px solid ButtonBorder;
+  border-radius: 4px;
+  background: Canvas;
+  color: CanvasText;
+}

package/dist/demo.js

@@ -0,0 +1,40 @@
+const THEMES = ['', 'light', 'dark', 'solarized-light', 'solarized-dark'];
+const LABELS = ['Auto', 'Light', 'Dark', 'Solarized ☀', 'Solarized ☾'];
+
+const stored = localStorage.getItem('rc-demo-theme') ?? '';
+applyTheme(stored);
+
+function applyTheme(theme) {
+  if (theme) {
+    document.documentElement.dataset.theme = theme;
+  } else {
+    delete document.documentElement.dataset.theme;
+  }
+}
+
+function currentIndex() {
+  const current = document.documentElement.dataset.theme ?? '';
+  const idx = THEMES.indexOf(current);
+  return idx === -1 ? 0 : idx;
+}
+
+function updateButtons() {
+  const label = LABELS[currentIndex()];
+  document.querySelectorAll('.theme-picker').forEach((btn) => {
+    btn.textContent = label;
+  });
+}
+
+window.cycleTheme = function () {
+  const next = THEMES[(currentIndex() + 1) % THEMES.length];
+  applyTheme(next);
+  localStorage.setItem('rc-demo-theme', next);
+  updateButtons();
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  updateButtons();
+  document.querySelectorAll('.theme-picker').forEach((btn) => {
+    btn.addEventListener('click', window.cycleTheme);
+  });
+});