@livenetworks/ashlar 1.6.1 → 2.0.1

package/{js → components}/ln-dropdown/README.md

@@ -1,140 +1,150 @@
-# ln-dropdown
-
-> A menu-grade coordinator that adds click-outside, top-layer promotion, and automatic positioning on top of `ln-toggle`.
-
----
-
-## 1. Philosophy & The Dropdown Mindset
-
-In `ln-ashlar`, the core design principle is **orthogonality**. Rather than creating a heavy component that bundles state, LIFO click stacks, top-layer contexts, and styles, `ln-dropdown` splits them cleanly:
-
-1. **State Primitive (`ln-toggle`)**: Open/close state lives entirely on the inner `data-ln-toggle` attribute on the menu. `ln-dropdown` does not re-implement state; it is a thin behavior layer on top.
-2. **Behavior & Positioning (JavaScript)**: The `ln-dropdown` coordinator handles click-outside detection, viewport resize closures (which makes absolute positioning unreliable), top-layer promotion via the native Popover API (`popover="manual"`) to escape parent `overflow: hidden` clips and stacking contexts, and scroll position tracking.
-3. **Visual Presentation (CSS)**: Visual layouts, background shadows, and borders are handled in Vanilla CSS. The library ships mixins like `@include dropdown` and `@include dropdown-menu` to style the wrapper and popup elements.
-
----
-
-## 2. Minimal Blueprint
-
-Triggers and dropdown menus are paired by ID inside a wrapper container. Inactive menus are hidden via `ln-toggle` default rules.
-
-```html
-<!-- The Wrapper -->
-<div data-ln-dropdown>
-    <!-- The Trigger -->
-    <button type="button" data-ln-toggle-for="options-menu">Options</button>
-    
-    <!-- The Menu (State Primitive) -->
-    <ul id="options-menu" data-ln-toggle>
-        <li><a href="/profile">Profile</a></li>
-        <li><a href="/settings">Settings</a></li>
-        <li><hr></li>
-        <li><a href="/logout">Log out</a></li>
-    </ul>
-</div>
-```
-
-### Key Anatomy Rules
-- **The Wrapper (`data-ln-dropdown`)**: Creates the dropdown coordinator instance.
-- **The Trigger (`data-ln-toggle-for="id"`)**: Standard `ln-toggle` button. ARIA attributes `aria-haspopup="menu"` and `aria-expanded` are synced automatically.
-- **The Menu (`data-ln-toggle`)**: Standard `ln-toggle` element. Value `open` represents open; anything else is closed. Role `menu` is auto-injected.
-
----
-
-## 3. Declarative API & State Contract
-
-There are no imperative JavaScript methods (like `open()` or `close()`) on the coordinator instance. **The HTML attribute is the sole contract.** 
-
-Outside clicks, window resizes, triggers, and custom scripts all change state by writing the active attribute on the inner menu element:
-
-```js
-const wrapper = document.querySelector('[data-ln-dropdown]');
-const menu = wrapper.querySelector('[data-ln-toggle]');
-
-// Open the menu (dropdown promotes it to the top layer and positions it automatically)
-menu.setAttribute('data-ln-toggle', 'open');
-
-// Close the menu
-menu.setAttribute('data-ln-toggle', 'close');
-
-// Cleanup the coordinator instance
-wrapper.lnDropdown.destroy();
-```
-
-### Attributes
-- `data-ln-dropdown`: Placed on the wrapper element to create the coordinator.
-- `data-ln-toggle-for="id"`: Placed on trigger referencing the menu ID.
-- `data-ln-toggle`: Placed on the menu element. Value `"open"` = open; anything else = closed.
-
----
-
-## 4. Transition Events
-
-All events bubble. The dispatch target is the inner menu element (except `:destroyed` which dispatches on the wrapper).
-
-| Event | Bubbles | Detail | Dispatched When |
-|---|---|---|---|
-| **`ln-dropdown:open`** | Yes | `{ target: menuElement }` | After top-layer promotion and positioning are complete. |
-| **`ln-dropdown:close`** | Yes | `{ target: menuElement }` | After menu is closed, exits the top layer, and outside listeners removed. |
-| **`ln-dropdown:destroyed`** | Yes | `{ target: wrapperElement }` | Inside `destroy()`, after removing listeners. |
-
-*Note*: Open/close state is managed by `ln-toggle`. Use `ln-toggle:before-open` / `ln-toggle:before-close` to cancel transitions.
-
-```js
-// Example: React to dropdown open
-document.addEventListener('ln-dropdown:open', (e) => {
-    console.log('Active dropdown:', e.detail.target.id);
-});
-```
-
----
-
-## 5. Behavior & Integration
-
-- **Top-Layer Promotion**: On open, the menu is shown via the native Popover API (`showPopover()`), which renders it in the browser's top layer — escaping ancestor `overflow: hidden` clipping and stacking contexts without moving it in the DOM. `popover="manual"` keeps dismissal entirely under `ln-dropdown`'s own control (no native light-dismiss).
-- **Positioning**: The menu opens below the trigger, right-aligned to it. It automatically flips above if there is no vertical space below, and left-aligned if there is no horizontal space on the right.
-- **Scroll & Resize Tracking**: Repositions automatically on every scroll to track the trigger. A window viewport resize closes the menu to prevent layout misalignments.
-
----
-
-## 6. Integration & Source Files
-
-- **Unified Bundle**: Loaded automatically with the main bundle:
-  ```html
-  <script src="dist/ln-ashlar.iife.js" defer></script>
-  ```
-- **Standalone IIFE**: For lightweight pages, load the standalone, self-registering IIFE version:
-  ```html
-  <script src="js/ln-dropdown/ln-dropdown.js" defer></script>
-  ```
-- **Active Source (ESM)**: Development source is located at [js/ln-dropdown/src/ln-dropdown.js](file:///c:/laragon/www/ln-ashlar/js/ln-dropdown/src/ln-dropdown.js).
-
----
-
-## Related
-- **[`ln-toggle`](../ln-toggle/README.md)** — Binary disclosure state primitive.
-- **[`ln-popover`](../ln-popover/README.md)** — Viewport-aware click-triggered rich-content overlays.
-
----
-
-## 🔧 Internals
-
-Source: `js/ln-dropdown/ln-dropdown.js`. Each `[data-ln-dropdown]` gets a `_component` instance at `element.lnDropdown` (`dom` the wrapper, `toggleEl` the menu, `triggerBtn`, plus the bound outside-click / scroll-reposition / resize-close handles, cleared on close and destroy).
-
-### Dependency on ln-toggle
-
-Dropdown does not manage open/close state itself — it listens for `ln-toggle:open`/`ln-toggle:close` on the inner `[data-ln-toggle]` menu and runs top-layer/positioning/listener-lifecycle steps in response. This is the library's **Presentation Coordinator** pattern layered on a state primitive; see [Coordinator Doctrine Reference](../../docs/architecture/coordinator.md).
-
-### Top-layer + placement
-
-The menu carries `popover="manual"` (set at construction). On `ln-toggle:open`: `showPopover()` promotes it to the browser's top layer — escaping ancestor `overflow: hidden` clips and stacking contexts without moving it in the DOM — then `_reposition()` measures and places it. On `ln-toggle:close`: the inline `top`/`left` are cleared and `hidePopover()` retracts it (guarded by `:popover-open`, since a menu opened at boot via persisted/static state was never shown through `showPopover()`).
-
-`_reposition()` reads the trigger's bounding rect, measures the menu via `measureHidden` (ln-core's hidden-safe dimension read), and calls `computePlacement(rect, size, 'bottom-end', gap)` — `gap` from the `--size-xs` token. `'bottom-end'` means below the trigger, right-aligned; `computePlacement` flips to `'top-end'` if there's no room below (alignment preserved through the flip) and clamps to the viewport.
-
-### Listener lifecycle
-
-`ln-toggle:open`/`ln-toggle:close` are bound at construction and removed at `destroy()`. On open only: an outside-click listener on `document` (deferred one tick via `setTimeout(0)` so the opening click itself doesn't immediately close the menu), a `scroll` listener on `window` (reposition), and a `resize` listener on `window` (close — resize makes fixed-position coordinates stale). All three are removed on close.
-
-### MutationObserver
-
-One global observer on `document.body`: `childList` (subtree) auto-initializes new `[data-ln-dropdown]` wrappers; `attributes` on `data-ln-dropdown` initializes on attribute addition.
+# ln-dropdown
+
+> Applied to a `<div data-ln-dropdown>` wrapper enclosing a trigger button and a `<ul data-ln-toggle>` menu.
+> When the menu emits `ln-toggle:open`, it sets `popover="manual"` on the menu, calls `showPopover()`, and calculates inline `top`/`left` coordinates.
+> On outside `click` or `Escape` key, it sets `setAttribute('data-ln-toggle', 'close')` on the menu.
+
+---
+
+## 1. Philosophy & The Dropdown Mindset
+
+In `ln-ashlar`, the core design principle is **orthogonality**. Rather than creating a heavy component that bundles state, LIFO click stacks, top-layer contexts, and styles, `ln-dropdown` splits them cleanly:
+
+1. **State Primitive (`ln-toggle`)**: Open/close state lives entirely on the inner `data-ln-toggle` attribute on the menu. `ln-dropdown` does not re-implement state; it is a thin behavior layer on top.
+2. **Behavior & Positioning (JavaScript)**: The `ln-dropdown` coordinator handles click-outside detection, viewport resize closures (which makes absolute positioning unreliable), top-layer promotion via the native Popover API (`popover="manual"`) to escape parent `overflow: hidden` clips and stacking contexts, and scroll position tracking.
+3. **Visual Presentation (CSS)**: Visual layouts, background shadows, and borders are handled in Vanilla CSS. The library ships mixins like `@include dropdown` and `@include dropdown-menu` to style the wrapper and popup elements.
+
+---
+
+## 2. Minimal Blueprint
+
+Triggers and dropdown menus are paired by ID inside a wrapper container. Inactive menus are hidden via `ln-toggle` default rules.
+
+```html
+<!-- The Wrapper -->
+<div data-ln-dropdown>
+    <!-- The Trigger -->
+    <button type="button" data-ln-toggle-for="options-menu">Options</button>
+    
+    <!-- The Menu (State Primitive) -->
+    <ul id="options-menu" data-ln-toggle>
+        <li><a href="/profile">Profile</a></li>
+        <li><a href="/settings">Settings</a></li>
+        <li><hr></li>
+        <li><a href="/logout">Log out</a></li>
+    </ul>
+</div>
+```
+
+### Key Anatomy Rules
+- **The Wrapper (`data-ln-dropdown`)**: Creates the dropdown coordinator instance.
+- **The Trigger (`data-ln-toggle-for="id"`)**: Standard `ln-toggle` button. ARIA attributes `aria-haspopup="menu"` and `aria-expanded` are synced automatically.
+- **The Menu (`data-ln-toggle`)**: Standard `ln-toggle` element. Value `open` represents open; anything else is closed. Role `menu` is auto-injected on `<ul>`, `role="none"` on `<li>`, and `role="menuitem"` with roving `tabindex` on interactive child buttons/anchors.
+
+---
+
+## 3. Declarative API & State Contract
+
+There are no imperative JavaScript methods (like `open()` or `close()`) on the coordinator instance. **The HTML attribute is the sole contract.** 
+
+Outside clicks, window resizes, triggers, and custom scripts all change state by writing the active attribute on the inner menu element:
+
+```js
+const wrapper = document.querySelector('[data-ln-dropdown]');
+const menu = wrapper.querySelector('[data-ln-toggle]');
+
+// Open the menu (dropdown promotes it to the top layer and positions it automatically)
+menu.setAttribute('data-ln-toggle', 'open');
+
+// Close the menu
+menu.setAttribute('data-ln-toggle', 'close');
+
+// Cleanup the coordinator instance
+wrapper.lnDropdown.destroy();
+```
+
+### Attributes
+- `data-ln-dropdown`: Placed on the wrapper element to create the coordinator.
+- `data-ln-dropdown-position`: Placed on the wrapper element to configure target placement (e.g. `"bottom-start"`, `"bottom-end"`, default: `"bottom-end"`).
+- `data-ln-dropdown-placement`: Dynamically set on the menu element by JS with the computed winning placement.
+- `data-ln-toggle-for="id"`: Placed on trigger referencing the menu ID.
+- `data-ln-toggle`: Placed on the menu element. Value `"open"` = open; anything else = closed.
+
+---
+
+## 4. Transition Events
+
+All events bubble. The dispatch target is the inner menu element.
+
+| Event | Bubbles | Detail | Dispatched When |
+|---|---|---|---|
+| **`ln-dropdown:open`** | Yes | `{ target: menuElement }` | After top-layer promotion and positioning are complete. |
+| **`ln-dropdown:close`** | Yes | `{ target: menuElement }` | After menu is closed, exits the top layer, and outside listeners removed. |
+
+*Note*: Open/close state is managed by `ln-toggle`. Use `ln-toggle:before-open` / `ln-toggle:before-close` to cancel transitions.
+
+```js
+// Example: React to dropdown open
+document.addEventListener('ln-dropdown:open', (e) => {
+    console.log('Active dropdown:', e.detail.target.id);
+});
+```
+
+---
+
+## 5. Behavior, Positioning & Keyboard Navigation
+
+- **Top-Layer Promotion**: On open, the menu is shown via the native Popover API (`showPopover()`), which renders it in the browser's top layer — escaping ancestor `overflow: hidden` clipping and stacking contexts without moving it in the DOM. `popover="manual"` keeps dismissal entirely under `ln-dropdown`'s own control (no native light-dismiss).
+- **Positioning**: Reads `data-ln-dropdown-position` (default: `"bottom-end"`). It opens aligned to the trigger, automatically flips if space is constrained, and reflects the winning placement in `data-ln-dropdown-placement`.
+- **Scroll & Resize Tracking**: Repositions automatically on every scroll to track the trigger. A window viewport resize closes the menu to prevent layout misalignments.
+- **ARIA Semantics & Structure**: `role="menu"` is set on the `<ul>`, `role="none"` on each `<li>` to strip list semantics, and `role="menuitem"` with roving `tabindex` (`0` on active/first, `-1` on siblings) on inner `<button>` and `<a href>` elements. All of this is injected and managed dynamically by JS — authors do not need to annotate children manually.
+- **ARIA APG Keyboard Navigation**:
+  - `ArrowDown` / `ArrowUp` on the trigger opens the menu and focuses the first/last menu item.
+  - Inside the menu, `ArrowDown` and `ArrowUp` rove focus cyclically across interactive items (`<button>`, `<a href>`).
+  - `Home` / `End` immediately jump to the first / last menu item.
+  - `Escape` closes the menu (`data-ln-toggle="close"`), stops propagation, and returns focus to the trigger button.
+  - `Tab` returns focus to the trigger button and closes the menu, allowing the native Tab flow to advance to the next page element seamlessly.
+
+---
+
+## 6. Integration & Source Files
+
+- **Unified Bundle**: Loaded automatically with the main bundle:
+  ```html
+  <script src="dist/ln-ashlar.iife.js" defer></script>
+  ```
+- **Standalone IIFE**: For lightweight pages, load the standalone, self-registering IIFE version:
+  ```html
+  <script src="components/ln-dropdown/ln-dropdown.js" defer></script>
+  ```
+- **Active Source (ESM)**: Development source is located at [components/ln-dropdown/src/ln-dropdown.js](file:///c:/laragon/www/ln-ashlar/components/ln-dropdown/src/ln-dropdown.js).
+
+---
+
+## Related
+- **[`ln-toggle`](../ln-toggle/README.md)** — Binary disclosure state primitive.
+- **[`ln-popover`](../ln-popover/README.md)** — Viewport-aware click-triggered rich-content overlays.
+
+---
+
+## 🔧 Internals
+
+Source: `components/ln-dropdown/ln-dropdown.js`. Each `[data-ln-dropdown]` gets a `_component` instance at `element.lnDropdown` (`dom` the wrapper, `toggleEl` the menu, `triggerBtn`, plus the bound outside-click / scroll-reposition / resize-close / keydown handles, cleared on close and destroy).
+
+### Dependency on ln-toggle
+
+Dropdown does not manage open/close state itself — it listens for `ln-toggle:open`/`ln-toggle:close` on the inner `[data-ln-toggle]` menu and runs top-layer/positioning/listener-lifecycle steps in response. This is the library's **Presentation Coordinator** pattern layered on a state primitive; see [Coordinator Doctrine Reference](../../docs/architecture/coordinator.md).
+
+### Top-layer + placement
+
+The menu carries `popover="manual"` (set at construction). On `ln-toggle:open`: `showPopover()` promotes it to the browser's top layer — escaping ancestor `overflow: hidden` clips and stacking contexts without moving it in the DOM — then `_reposition()` measures and places it. On `ln-toggle:close`: the inline `top`/`left` and `data-ln-dropdown-placement` are cleared and `hidePopover()` retracts it (guarded by `:popover-open`, since a menu opened at boot via persisted/static state was never shown through `showPopover()`).
+
+`_reposition()` reads the trigger's bounding rect, measures the menu via `measureHidden` (ln-core's hidden-safe dimension read), and calls `computePlacement(rect, size, position, gap)` — `gap` from the `--size-xs` token, `position` from `data-ln-dropdown-position` (default `'bottom-end'`). `computePlacement` flips if there's no room (alignment preserved through the flip) and clamps to the viewport.
+
+### Listener lifecycle
+
+`ln-toggle:open`/`ln-toggle:close` and `keydown` are bound at construction and removed at `destroy()`. On open only: an outside-click listener on `document` (deferred one tick via `setTimeout(0)` so the opening click itself doesn't immediately close the menu), a `scroll` listener on `window` (reposition), and a `resize` listener on `window` (close — resize makes fixed-position coordinates stale). All three are removed on close.
+
+### MutationObserver
+
+One global observer on `document.body`: `childList` (subtree) auto-initializes new `[data-ln-dropdown]` wrappers; `attributes` on `data-ln-dropdown` initializes on attribute addition.

package/components/ln-dropdown/ln-dropdown-dev.scss

@@ -0,0 +1,13 @@
+@use '../../theme/config/mixins' as *;
+
+[data-ln-debug] {
+	// 1. Dropdown Menu Check: dropdown coordinator must wrap a menu [data-ln-toggle]
+	[data-ln-dropdown]:not(:has([data-ln-toggle])) {
+		@include dev-dom-error("[data-ln-dropdown] is missing a required child menu [data-ln-toggle].");
+	}
+
+	// 2. Dropdown Trigger Check: dropdown coordinator must wrap a trigger [data-ln-toggle-for]
+	[data-ln-dropdown]:not(:has([data-ln-toggle-for])) {
+		@include dev-dom-error("[data-ln-dropdown] is missing a required child trigger [data-ln-toggle-for].");
+	}
+}

package/components/ln-dropdown/ln-dropdown.js

@@ -0,0 +1 @@
+(function(){"use strict";function R(){return typeof window>"u"?!1:window.lnDebug===!0||window.lnCore&&window.lnCore._debugSink?!0:typeof document<"u"&&document.body?document.body.hasAttribute("data-ln-debug")||document.body.querySelector("[data-ln-debug]")!==null:!1}function E(e){if(typeof window>"u")return!1;if(window.lnDebug===!0)return!0;if(window.lnCore&&window.lnCore._debugIsContained)return e?window.lnCore._debugIsContained(e):window.lnCore._debugSink!==null;if(e&&e.closest){const t=e.closest("[data-ln-debug]");return!(!t||typeof document<"u"&&t===document.documentElement)}return typeof document<"u"&&document.body?document.body.hasAttribute("data-ln-debug"):!1}if(typeof window<"u"&&(window.lnCore=window.lnCore||{},!window.lnCore._warnBound)){window.lnCore._warnBound=!0;const e=console.warn;console.warn=function(...t){if(typeof t[0]=="string"&&(t[0].startsWith("[ln-")||t[0].startsWith("[lnCore"))){let r=null;for(let s=1;s<t.length;s++)if(t[s]&&t[s].nodeType===1){r=t[s];break}if(!E(r))return}e.apply(console,t)}}function k(e,t,n){const r=n||{};window.lnCore._debugSink&&window.lnCore._debugSink("event",t,e,r),e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:r}))}function v(e,t){if(!document.body){document.addEventListener("DOMContentLoaded",function(){v(e,t)}),console.warn("["+t+'] Script loaded before <body> — add "defer" to your <script> tag');return}e()}const q={};function H(e,t){q[e]=t}function V(e){return q[e]||{ingress:t=>t,egress:t=>t}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=H,window.lnCore.getDataMapper=V);function U(){typeof window>"u"||(window.lnCore=window.lnCore||{},!window.lnCore._localeObserverBound&&(window.lnCore._localeObserverBound=!0,v(function(){new MutationObserver(function(){k(document,"ln-core:locale-change",{})}).observe(document.documentElement,{attributes:!0,attributeFilter:["lang"],subtree:!0})},"ln-core")))}const B={};function K(e,t){if(!e||typeof t!="object")return;const n=e.toLowerCase().split("-")[0];B[n]=t}function Q(e){if(!e)return null;const t=e.toLowerCase().split("-")[0];return B[t]||null}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerLocaleFallback=K,window.lnCore.getLocaleFallback=Q,window.lnCore.ensureLocaleObserver=U);const S={};function J(e,t){S[e]||(S[e]=document.querySelector('[data-ln-template="'+e+'"]'));const n=S[e];return n?n.content.cloneNode(!0):(console.warn("["+(t||"ln-core")+'] Template "'+e+'" not found'),null)}function $(e,t){if(!e||!t)return e;const n=e.querySelectorAll("[data-ln-field]");for(let i=0;i<n.length;i++){const o=n[i],l=o.getAttribute("data-ln-field");t[l]!=null&&(o.textContent=t[l])}const r=e.querySelectorAll("[data-ln-attr]");for(let i=0;i<r.length;i++){const o=r[i],l=o.getAttribute("data-ln-attr").split(",");for(let c=0;c<l.length;c++){const d=l[c].trim().split(":");if(d.length!==2)continue;const a=d[0].trim(),f=d[1].trim();t[f]!=null&&o.setAttribute(a,t[f])}}const s=e.querySelectorAll("[data-ln-show]");for(let i=0;i<s.length;i++){const o=s[i],l=o.getAttribute("data-ln-show");l in t&&o.classList.toggle("hidden",!t[l])}const u=e.querySelectorAll("[data-ln-class]");for(let i=0;i<u.length;i++){const o=u[i],l=o.getAttribute("data-ln-class").split(",");for(let c=0;c<l.length;c++){const d=l[c].trim().split(":");if(d.length!==2)continue;const a=d[0].trim(),f=d[1].trim();f in t&&o.classList.toggle(a,!!t[f])}}return e}function G(e,t){e.matches&&e.matches("[data-ln-form], [data-ln-fillable]")&&(window.lnCore._debugSink&&window.lnCore._debugSink("event","ln-fill",e,t??null),e.dispatchEvent(new CustomEvent("ln-fill",{detail:t??null,bubbles:!0})));const n=e.querySelectorAll("[data-ln-form], [data-ln-fillable]");for(let r=0;r<n.length;r++)window.lnCore._debugSink&&window.lnCore._debugSink("event","ln-fill",n[r],t??null),n[r].dispatchEvent(new CustomEvent("ln-fill",{detail:t??null,bubbles:!0}));return e}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._fillBound||(window.lnCore._fillBound=!0,document.addEventListener("ln-fill",function(e){if(!(!e.target.matches||!e.target.matches("[data-ln-fillable]")))if(e.detail)$(e.target,e.detail);else{const t=e.target.querySelectorAll("[data-ln-field]");for(let n=0;n<t.length;n++)t[n].textContent=""}})));function M(e,t){if(!e||!t)return e;const n=document.createTreeWalker(e,NodeFilter.SHOW_TEXT);for(;n.nextNode();){const u=n.currentNode;u.textContent.indexOf("{{")!==-1&&(u.textContent=u.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(i,o){return t[o]!==void 0?t[o]:""}))}const r=function(u,i){return t[i]!==void 0?t[i]:""},s=Array.from(e.querySelectorAll("*"));e.nodeType===1&&s.push(e);for(let u=0;u<s.length;u++){const i=s[u],o=i.attributes;for(let l=0;l<o.length;l++){const c=o[l];c.value.indexOf("{{")!==-1&&i.setAttribute(c.name,c.value.replace(/\{\{\s*(\w+)\s*\}\}/g,r))}}return e}function X(e,t,n,r,s,u){const i={};for(let l=0;l<e.children.length;l++){const c=e.children[l],d=c.getAttribute("data-ln-render-key");d&&(i[d]=c)}const o=document.createDocumentFragment();for(let l=0;l<t.length;l++){const c=t[l],d=String(r(c));let a=i[d];if(a)s(a,c,l);else{const f=J(n,u);if(!f||(M(f,c),a=f.firstElementChild,!a))continue;a.setAttribute("data-ln-render-key",d),s(a,c,l)}o.appendChild(a)}e.textContent="",e.appendChild(o)}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.fillTemplate=M,window.lnCore.fill=$,window.lnCore.lnFill=G,window.lnCore.renderList=X);function F(e,t,n){const r=e.getAttribute(t);return r===null?n:r}function Y(e,t,n){const r=parseInt(e.getAttribute(t),10);return isNaN(r)?n:r}function Z(e,t,n=!1){const r=e.getAttribute(t);if(r===null)return!!n;const s=r.trim().toLowerCase();return!(s==="false"||s==="0")}function ee(e,t){return(e.getAttribute(t)||"").split(",").map(n=>n.trim()).filter(Boolean)}const L=new Map;function te(e,t){const n=(e?e.join("|"):"")+"::"+t;if(L.has(n))return L.get(n);const r=new Set(e||[]),s=function(u,i){const o=u.getAttribute(i);return o!==null&&r.has(o)?o:t};return L.set(n,s),s}function ne(e,t,n){const r=parseFloat(e.getAttribute(t));return isNaN(r)?n:r}function oe(e,t,n){const r=e.getAttribute(t);if(!r)return n;try{return JSON.parse(r)}catch{return n}}function N(e,t,n,r,s){if(!e||t===null)return!0;const u=r||"ln-component",i=e.type;if(i==="trigger"||i==="marker"||i==="string"||i==="list"||!i||t===""&&e.fallback!==void 0)return!0;const o=l=>{s?console.warn(l,s):console.warn(l)};if(i==="boolean"){const l=t.trim().toLowerCase();return l!==""&&l!=="true"&&l!=="false"&&l!=="1"&&l!=="0"?(o(`[${u}] Invalid value "${t}" for boolean attribute "${n}". Allowed: "true", "false", or presence-only.`),!1):!0}if(i==="enum"){const l=e.values||[];return l.includes(t)?!0:(o(`[${u}] Invalid value "${t}" for attribute "${n}". Allowed: ${l.join(", ")}. Fallback: "${e.fallback}".`),!1)}if(i==="integer"){if(!/^-?\d+$/.test(t))return o(`[${u}] Invalid integer "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1;const l=parseInt(t,10);return e.min!==void 0&&l<e.min?(o(`[${u}] Value ${l} for attribute "${n}" is less than min (${e.min}).`),!1):e.max!==void 0&&l>e.max?(o(`[${u}] Value ${l} for attribute "${n}" is greater than max (${e.max}).`),!1):!0}if(i==="float")return isNaN(Number(t))?(o(`[${u}] Invalid float "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1):!0;if(i==="json")try{return JSON.parse(t),!0}catch(l){return o(`[${u}] Invalid JSON for attribute "${n}": ${l.message}. Fallback: ${e.fallback}.`),!1}return!0}function re(e,t,n){for(const r in n){const[s,u,i]=n[r];Object.defineProperty(e,r,{get:function(){return s(t,u,i)},enumerable:!0,configurable:!0})}return e}function ie(e){const t={};for(const n in e){const r=e[n];if(!r||!r.prop)continue;let s=r.read;if(!s&&r.type)switch(r.type){case"enum":s=te(r.values,r.fallback);break;case"integer":s=Y;break;case"float":s=ne;break;case"boolean":s=Z;break;case"list":s=ee;break;case"json":s=oe;break;case"string":default:s=F;break}s||(s=F),t[r.prop]=[s,n,r.fallback]}return t}function le(e){const t={};for(const n in e){const r=e[n];r&&r.effect&&(t[n]=r.effect)}return Object.keys(t).length?t:null}function se(e){if(e.onAttrChange&&!e.declared)return null;const t=new Set;if(e.effects)for(const n in e.effects)t.add(n);if(e.onAttrChange&&e.declared)for(const n of e.declared)t.add(n);return t}function O(e,t,n,r){if(e.nodeType!==1)return;const u=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",i=Array.from(e.querySelectorAll(u));e.matches&&e.matches(u)&&i.push(e);for(const o of i)if(!o[n]){window.lnCore._persistSink&&o.hasAttribute("data-ln-persist")&&window.lnCore._persistSink(o,t);try{o[n]=new r(o)}catch(l){console.error("["+n+"] init failed",o,l)}}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._bootHolds=window.lnCore._bootHolds||0,window.lnCore._bootQueue=window.lnCore._bootQueue||[]);function ue(){return typeof window<"u"&&window.lnCore&&window.lnCore._bootHolds||0}function ce(e){typeof window<"u"?(window.lnCore=window.lnCore||{},window.lnCore._bootHolds=window.lnCore._bootHolds||0,window.lnCore._bootQueue=window.lnCore._bootQueue||[],window.lnCore._bootHolds>0?window.lnCore._bootQueue.push(e):setTimeout(e,0)):e()}function W(){window.lnCore=window.lnCore||{};const e=window.lnCore._attrRegistry=window.lnCore._attrRegistry||{byAttr:new Map,reactive:[],persist:[]};return e.byReactive=e.byReactive||new Map,e.reactiveWildcard=e.reactiveWildcard||[],e}function de(e){const t=W(),n=e.observed||[];for(let r=0;r<n.length;r++){const s=n[r];t.byAttr.has(s)||t.byAttr.set(s,[]),t.byAttr.get(s).push(e)}if(t.byDeclaredAttr=t.byDeclaredAttr||new Map,e.attributes)for(const r in e.attributes){t.byDeclaredAttr.has(r)||t.byDeclaredAttr.set(r,[]);const s=t.byDeclaredAttr.get(r);s.some(u=>u.componentTag===e.componentTag)||s.push({spec:e.attributes[r],componentTag:e.componentTag})}if(e.onAttrChange||e.effects){t.reactive.push(e);const r=se(e);if(r===null)t.reactiveWildcard.push(e);else for(const s of r)t.byReactive.has(s)||t.byReactive.set(s,[]),t.byReactive.get(s).push(e)}e.persist&&t.persist.push(e)}function j(e,t,n,r){for(let s=0;s<e.length;s++){const u=e[s];if(!t[u.attribute])continue;const i=u.effects&&u.effects[n];i?i(t,n,r):u.onAttrChange&&(!u.declared||u.declared.has(n))&&u.onAttrChange(t,n,r)}}function ae(e){const t=e.target,n=e.attributeName;if(e.oldValue===t.getAttribute(n))return;const r=W(),s=r.byAttr.get(n);if(R()&&r.byDeclaredAttr&&r.byDeclaredAttr.has(n)&&E(t)){const u=r.byDeclaredAttr.get(n),i=t.getAttribute(n);for(let o=0;o<u.length;o++)N(u[o].spec,i,n,u[o].componentTag,t)}if(window.lnCore._debugSink&&(n.indexOf("data-ln-")===0||s)&&window.lnCore._debugSink("attr",n,t,{oldValue:e.oldValue,newValue:t.getAttribute(n)}),n.indexOf("data-ln-")===0){const u=r.byReactive.get(n);u&&j(u,t,n,e.oldValue),r.reactiveWildcard.length&&j(r.reactiveWildcard,t,n,e.oldValue)}if(s)for(let u=0;u<s.length;u++){const i=s[u];if(i.handler){i.handler(t,n,e.oldValue);continue}i.onAttributeChange&&t[i.attribute]?i.onAttributeChange(t,n):(O(t,i.selector,i.attribute,i.ComponentFn),i.onInit&&i.onInit(t))}}function fe(){window.lnCore=window.lnCore||{},!window.lnCore._attrObserverBound&&(window.lnCore._attrObserverBound=!0,v(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++)try{ae(t[n])}catch(r){console.error("[ln-core] mutation handler failed",t[n].target,r)}}).observe(document.body,{attributes:!0,subtree:!0,attributeOldValue:!0})},"ln-core"))}function P(){return window.lnCore=window.lnCore||{},window.lnCore._lifecycleRegistry=window.lnCore._lifecycleRegistry||[]}function ge(e){const t=P();if(t.length){if(e.target)for(let n=0;n<t.length;n++){const r=t[n];if(r.onSubtreeChange){const s=r.query,u=e.target.nodeType===1?e.target.matches(s)?e.target:e.target.closest(s):e.target.parentElement?e.target.parentElement.closest(s):null;u&&r.onSubtreeChange(u,e)}}for(let n=0;n<e.addedNodes.length;n++){const r=e.addedNodes[n];if(r.nodeType===1)for(let s=0;s<t.length;s++){const u=t[s];O(r,u.selector,u.attribute,u.ComponentFn),u.onInit&&u.onInit(r)}}for(let n=0;n<e.removedNodes.length;n++){const r=e.removedNodes[n];if(r.nodeType===1)for(let s=0;s<t.length;s++){const u=t[s],i=u.query,o=Array.from(r.querySelectorAll(i));r.matches&&r.matches(i)&&o.push(r);for(let l=0;l<o.length;l++){const c=o[l];if(!document.contains(c)){const d=c[u.attribute];if(d&&typeof d.destroy=="function")try{d.destroy()}catch(a){console.error("["+u.attribute+"] destroy failed",c,a)}delete c[u.attribute]}}}}}}function pe(){window.lnCore=window.lnCore||{},!window.lnCore._lifecycleObserverBound&&(window.lnCore._lifecycleObserverBound=!0,v(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++){const r=t[n];if(r.type==="childList")try{ge(r)}catch(s){console.error("[ln-core] lifecycle handler failed",r.target,s)}}}).observe(document.body,{childList:!0,subtree:!0})},"ln-core"))}function he(e,t,n,r,s={}){const u=s.extraAttributes||[],i=s.onAttributeChange||null,o=s.onSubtreeChange||null,l=s.onInit||null,c=s.onAttrChange||null,d=s.effects||null,a=s.attributes||null,f=a?le(a):d,A=a?new Set(Object.keys(a)):null,_=s.persist||null;function C(h){const p=h||document.body;if(O(p,e,t,n),a&&R())for(const w in a){const Se=a[w],D=Array.from(p.querySelectorAll("["+w+"]"));p.matches&&p.matches("["+w+"]")&&D.push(p);for(let x=0;x<D.length;x++){const I=D[x];E(I)&&N(Se,I.getAttribute(w),w,r,I)}}l&&l(p)}const b=[];if(e.indexOf("[")!==-1){const h=/\[([\w-]+)/g;let p;for(;(p=h.exec(e))!==null;)b.push(p[1])}else b.push(e);de({selector:e,attribute:t,componentTag:r,attributes:a,ComponentFn:n,onInit:l,observed:b.concat(u),onAttributeChange:i,onAttrChange:c,effects:f,declared:A,persist:_}),fe();const m=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]";P().push({selector:e,attribute:t,ComponentFn:n,onInit:l,onSubtreeChange:o,query:m}),pe(),window[t]=C;function g(){ue()>0?ce(function(){C(document.body)}):C(document.body)}return document.readyState==="loading"?document.addEventListener("DOMContentLoaded",g):g(),C}function z(e){return(e||"").replace(/^#/,"")}function T(e){const t=e===void 0?location.hash:e,n={},r=z(t);if(!r)return n;const s=r.split("&");for(let u=0;u<s.length;u++){const i=s[u];if(!i)continue;const o=i.indexOf(":"),l=o>-1?i.slice(0,o):i,c=o>-1?i.slice(o+1):"";if(l)try{n[l]=decodeURIComponent(c)}catch{n[l]=c}}return n}function we(e){if(!e)return null;const t=T();return e in t?t[e]:null}function be(e,t){if(!e)return;const n=T();t==null?delete n[e]:n[e]=String(t);const s=Object.keys(n).map(function(u){const i=n[u];return i===""?u:u+":"+encodeURIComponent(i)}).join("&");z(location.hash)!==s&&(location.hash=s)}function me(e){return e.button===1||e.ctrlKey||e.metaKey||e.shiftKey?!1:(e.preventDefault(),!0)}function Ce(e,t){if(!e||!e.hasAttribute("data-ln-hash"))return null;const n=e.getAttribute("data-ln-hash");if(n&&n.trim()!=="")return n.trim();const r=e.getAttribute("data-ln-sort")||e.getAttribute("data-ln-search-for")||e.getAttribute("data-ln-search")||e.getAttribute("data-ln-filter")||e.id;return r?t?r+"-"+t:r:t||null}function ye(e,t){return!t||t==="none"||e===null||e===void 0?null:String(e)+"."+t}function _e(e){return!e||typeof e!="string"?null:e.endsWith(".asc")?{fieldOrColumn:e.slice(0,-4),direction:"asc"}:e.endsWith(".desc")?{fieldOrColumn:e.slice(0,-5),direction:"desc"}:null}function Ae(e,t){return!e||!Array.isArray(t)||t.length===0?null:e+":"+t.map(encodeURIComponent).join(",")}function ve(e){if(!e||typeof e!="string")return null;const t=e.indexOf(":");if(t===-1)return null;const n=e.slice(0,t),r=e.slice(t+1),s=r?r.split(",").map(function(u){try{return decodeURIComponent(u)}catch{return u}}).filter(Boolean):[];return{key:n,values:s}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.hashParse=T,window.lnCore.hashGet=we,window.lnCore.hashSet=be,window.lnCore.hashLinkClick=me,window.lnCore.resolveHashNamespace=Ce,window.lnCore.hashSortEncode=ye,window.lnCore.hashSortDecode=_e,window.lnCore.hashFilterEncode=Ae,window.lnCore.hashFilterDecode=ve);function Ee(e,t,n,r){const s=typeof r=="number"?r:4,u=window.innerWidth,i=window.innerHeight,o=t.width,l=t.height,c=n.split("-"),d=c[0],a=c[1]==="start"||c[1]==="end"?c[1]:"center",f={top:["top","bottom","right","left"],bottom:["bottom","top","right","left"],left:["left","right","top","bottom"],right:["right","left","top","bottom"]},A=f[d]||f.bottom;function _(g){return g==="top"||g==="bottom"?a==="start"?e.left:a==="end"?e.right-o:e.left+(e.width-o)/2:a==="start"?e.top:a==="end"?e.bottom-l:e.top+(e.height-l)/2}function C(g){let h,p,w=!0;return g==="top"?(h=e.top-s-l,p=_(g),h<0&&(w=!1)):g==="bottom"?(h=e.bottom+s,p=_(g),h+l>i&&(w=!1)):g==="left"?(h=_(g),p=e.left-s-o,p<0&&(w=!1)):(h=_(g),p=e.right+s,p+o>u&&(w=!1)),{top:h,left:p,side:g,fits:w}}let b=null;for(let g=0;g<A.length;g++){const h=C(A[g]);if(h.fits){b=h;break}}b||(b=C(A[0]));let y=b.top,m=b.left;return o>=u?m=0:(m<0&&(m=0),m+o>u&&(m=u-o)),l>=i?y=0:(y<0&&(y=0),y+l>i&&(y=i-l)),{top:y,left:m,placement:b.side}}function ke(e){if(!e)return{width:0,height:0};const t=e.style,n=t.visibility,r=t.display,s=t.position;t.visibility="hidden",t.display="block",t.position="fixed";const u=e.offsetWidth,i=e.offsetHeight;return t.visibility=n,t.display=r,t.position=s,{width:u,height:i}}(function(){const e="data-ln-dropdown",t="lnDropdown",n="bottom-end";if(window[t]!==void 0)return;const r={"data-ln-dropdown":{type:"marker",description:"Initializes the dropdown container"},"data-ln-dropdown-position":{prop:"position",type:"enum",values:["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"],fallback:n,description:"Preferred positioning anchor"},"data-ln-dropdown-placement":{type:"enum",values:["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"],description:"Active calculated placement applied at runtime"},"data-ln-dropdown-menu":{type:"marker",description:"Dropdown menu element containing items"}},s=ie(r);function u(i){this.dom=i,re(this,i,s),this.toggleEl=i.querySelector("[data-ln-toggle]"),this._boundDocClick=null,this._docClickTimeout=null,this._boundScrollReposition=null,this._boundResizeClose=null,this.toggleEl&&(this.toggleEl.setAttribute("data-ln-dropdown-menu",""),this.toggleEl.setAttribute("role","menu"),this.toggleEl.setAttribute("popover","manual"),this._initMenuAria()),this.triggerBtn=i.querySelector("[data-ln-toggle-for]"),this.triggerBtn&&(this.triggerBtn.setAttribute("aria-haspopup","menu"),this.triggerBtn.setAttribute("aria-expanded","false"));const o=this;return this._onRequestOpen=function(){o.toggleEl&&o.toggleEl.setAttribute("data-ln-toggle","open")},this._onRequestClose=function(){o.toggleEl&&o.toggleEl.setAttribute("data-ln-toggle","close")},this._onRequestToggle=function(){if(o.toggleEl){const l=o.toggleEl.getAttribute("data-ln-toggle");o.toggleEl.setAttribute("data-ln-toggle",l==="open"?"close":"open")}},this._onKeydown=function(l){const c=o.toggleEl&&o.toggleEl.getAttribute("data-ln-toggle")==="open";if(l.key==="Escape"){c&&(l.preventDefault(),l.stopPropagation(),o.toggleEl.setAttribute("data-ln-toggle","close"),o.triggerBtn&&o.triggerBtn.focus());return}if(l.key==="Tab"){c&&(o.triggerBtn&&o.triggerBtn.focus(),o.toggleEl.setAttribute("data-ln-toggle","close"));return}const d=o._getMenuItems();if(d.length===0)return;if(!c&&(l.key==="ArrowDown"||l.key==="ArrowUp")){l.preventDefault(),o.toggleEl.setAttribute("data-ln-toggle","open"),setTimeout(function(){const f=o._getMenuItems();f.length>0&&o._focusItem(f,l.key==="ArrowDown"?0:f.length-1)},0);return}if(!c)return;const a=d.indexOf(document.activeElement);if(l.key==="ArrowDown"){l.preventDefault();const f=a<d.length-1?a+1:0;o._focusItem(d,f)}else if(l.key==="ArrowUp"){l.preventDefault();const f=a>0?a-1:d.length-1;o._focusItem(d,f)}else l.key==="Home"?(l.preventDefault(),o._focusItem(d,0)):l.key==="End"&&(l.preventDefault(),o._focusItem(d,d.length-1))},this.dom.addEventListener("ln-dropdown:request-open",this._onRequestOpen),this.dom.addEventListener("ln-dropdown:request-close",this._onRequestClose),this.dom.addEventListener("ln-dropdown:request-toggle",this._onRequestToggle),this.dom.addEventListener("keydown",this._onKeydown),this._onToggleOpen=function(l){!l.detail||l.detail.target!==o.toggleEl||(o.triggerBtn&&o.triggerBtn.setAttribute("aria-expanded","true"),typeof o.toggleEl.showPopover=="function"&&o.toggleEl.showPopover(),o._initMenuAria(),o._reposition(),o._addOutsideClickListener(),o._addScrollRepositionListener(),o._addResizeCloseListener(),k(i,"ln-dropdown:open",{target:l.detail.target}))},this._onToggleClose=function(l){!l.detail||l.detail.target!==o.toggleEl||(o.triggerBtn&&o.triggerBtn.setAttribute("aria-expanded","false"),o._removeOutsideClickListener(),o._removeScrollRepositionListener(),o._removeResizeCloseListener(),o.toggleEl.style.top="",o.toggleEl.style.left="",o.toggleEl.removeAttribute("data-ln-dropdown-placement"),typeof o.toggleEl.hidePopover=="function"&&o.toggleEl.matches(":popover-open")&&o.toggleEl.hidePopover(),k(i,"ln-dropdown:close",{target:l.detail.target}))},this.toggleEl&&(this.toggleEl.addEventListener("ln-toggle:open",this._onToggleOpen),this.toggleEl.addEventListener("ln-toggle:close",this._onToggleClose)),this}u.prototype._initMenuAria=function(){if(!this.toggleEl)return;const i=this.toggleEl.querySelectorAll("li");for(const l of i)l.setAttribute("role","none");const o=this._getMenuItems();for(let l=0;l<o.length;l++)o[l].setAttribute("role","menuitem"),o[l].setAttribute("tabindex",l===0?"0":"-1")},u.prototype._getMenuItems=function(){return this.toggleEl?Array.from(this.toggleEl.querySelectorAll('a[href], button:not([disabled]), [role="menuitem"]:not([disabled])')):[]},u.prototype._focusItem=function(i,o){for(let l=0;l<i.length;l++)i[l].setAttribute("tabindex",l===o?"0":"-1");i[o]&&i[o].focus()},u.prototype._reposition=function(){if(!this.triggerBtn||!this.toggleEl)return;const i=this.triggerBtn.getBoundingClientRect(),o=ke(this.toggleEl),l=parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--size-xs"))*16||4,c=this.position||n,d=Ee(i,o,c,l);this.toggleEl.style.top=d.top+"px",this.toggleEl.style.left=d.left+"px",this.toggleEl.setAttribute("data-ln-dropdown-placement",d.placement)},u.prototype._addOutsideClickListener=function(){if(this._boundDocClick)return;const i=this;this._boundDocClick=function(o){i.dom.contains(o.target)||i.toggleEl&&i.toggleEl.contains(o.target)||i.toggleEl&&i.toggleEl.getAttribute("data-ln-toggle")==="open"&&i.toggleEl.setAttribute("data-ln-toggle","close")},i._docClickTimeout=setTimeout(function(){i._docClickTimeout=null,document.addEventListener("click",i._boundDocClick)},0)},u.prototype._removeOutsideClickListener=function(){this._docClickTimeout&&(clearTimeout(this._docClickTimeout),this._docClickTimeout=null),this._boundDocClick&&(document.removeEventListener("click",this._boundDocClick),this._boundDocClick=null)},u.prototype._addScrollRepositionListener=function(){const i=this;this._boundScrollReposition=function(){i._reposition()},window.addEventListener("scroll",this._boundScrollReposition,{passive:!0,capture:!0})},u.prototype._removeScrollRepositionListener=function(){this._boundScrollReposition&&(window.removeEventListener("scroll",this._boundScrollReposition,{capture:!0}),this._boundScrollReposition=null)},u.prototype._addResizeCloseListener=function(){const i=this;this._boundResizeClose=function(){i.toggleEl&&i.toggleEl.getAttribute("data-ln-toggle")==="open"&&i.toggleEl.setAttribute("data-ln-toggle","close")},window.addEventListener("resize",this._boundResizeClose)},u.prototype._removeResizeCloseListener=function(){this._boundResizeClose&&(window.removeEventListener("resize",this._boundResizeClose),this._boundResizeClose=null)},u.prototype.destroy=function(){this.dom[t]&&(this.dom.removeEventListener("ln-dropdown:request-open",this._onRequestOpen),this.dom.removeEventListener("ln-dropdown:request-close",this._onRequestClose),this.dom.removeEventListener("ln-dropdown:request-toggle",this._onRequestToggle),this.dom.removeEventListener("keydown",this._onKeydown),this._removeOutsideClickListener(),this._removeScrollRepositionListener(),this._removeResizeCloseListener(),this.toggleEl&&typeof this.toggleEl.hidePopover=="function"&&this.toggleEl.matches(":popover-open")&&this.toggleEl.hidePopover(),this.toggleEl&&(this.toggleEl.removeAttribute("data-ln-dropdown-placement"),this.toggleEl.removeEventListener("ln-toggle:open",this._onToggleOpen),this.toggleEl.removeEventListener("ln-toggle:close",this._onToggleClose)),delete this.dom[t])},he(e,t,u,"ln-dropdown",{attributes:r})})()})();

package/components/ln-dropdown/ln-dropdown.schema.json

@@ -0,0 +1,90 @@
+{
+	"$comment": "This file is partly generated. The $comment, component, generator, and each attribute's direction, sources, type, values, fallback, and description keys are owned by the generator and synchronized from JS source code. All other keys are preserved and safe to hand-author. Regenerate with `npm run sync:ln-schemas`.",
+	"component": "ln-dropdown",
+	"generator": "scripts/sync-ln-schemas.mjs",
+	"attributes": {
+		"data-ln-debug": {
+			"direction": null,
+			"sources": [
+				"ln-dropdown-dev.scss"
+			]
+		},
+		"data-ln-dropdown": {
+			"direction": null,
+			"sources": [
+				"ln-dropdown-dev.scss",
+				"ln-dropdown.scss",
+				"src/ln-dropdown.js"
+			],
+			"type": "marker",
+			"description": "Initializes the dropdown container"
+		},
+		"data-ln-dropdown-menu": {
+			"direction": "runtime",
+			"sources": [
+				"ln-dropdown.scss",
+				"src/ln-dropdown.js"
+			],
+			"type": "marker",
+			"description": "Dropdown menu element containing items"
+		},
+		"data-ln-dropdown-placement": {
+			"direction": "runtime",
+			"sources": [
+				"src/ln-dropdown.js"
+			],
+			"type": "enum",
+			"values": [
+				"top",
+				"top-start",
+				"top-end",
+				"bottom",
+				"bottom-start",
+				"bottom-end",
+				"left",
+				"left-start",
+				"left-end",
+				"right",
+				"right-start",
+				"right-end"
+			],
+			"description": "Active calculated placement applied at runtime"
+		},
+		"data-ln-dropdown-position": {
+			"direction": null,
+			"sources": [
+				"src/ln-dropdown.js"
+			],
+			"type": "enum",
+			"values": [
+				"top",
+				"top-start",
+				"top-end",
+				"bottom",
+				"bottom-start",
+				"bottom-end",
+				"left",
+				"left-start",
+				"left-end",
+				"right",
+				"right-start",
+				"right-end"
+			],
+			"description": "Preferred positioning anchor"
+		},
+		"data-ln-toggle": {
+			"direction": "both",
+			"sources": [
+				"ln-dropdown-dev.scss",
+				"src/ln-dropdown.js"
+			]
+		},
+		"data-ln-toggle-for": {
+			"direction": "author",
+			"sources": [
+				"ln-dropdown-dev.scss",
+				"src/ln-dropdown.js"
+			]
+		}
+	}
+}

package/components/ln-dropdown/ln-dropdown.scss

@@ -0,0 +1,18 @@
+// ==========================================================================
+// ln-dropdown — Functional State & Placement Rules
+// ==========================================================================
+
+[data-ln-dropdown] {
+	position: relative;
+}
+
+[data-ln-dropdown-menu] {
+	display: none;
+	position: fixed;
+	inset: auto;
+	margin: 0;
+
+	&.open {
+		display: block;
+	}
+}