@gramlot/gramlot-examples 0.3.3 → 0.3.5

package/src/gramlot_examples/gallery/dist/inputs.js

@@ -6547,7 +6547,7 @@ function annotation(parameter) {
   });
   return alternatives.length === 1 ? alternatives[0] : { kind: "union", items: alternatives };
 }
-function defineComponent({ name, tag: tag2, base, mixins = [], parameters: parameters2 = {}, subTags = "", presentationDefaults = [], dataScope = false, command = false, implementation }) {
+function defineComponent({ name, tag: tag2, base, mixins = [], parameters: parameters2 = {}, subTags = "", presentationDefaults = [], dataScope = false, command = false, childParameters = {}, sourceContext = false, implementation }) {
   webcomponentCode({ code: tag2 });
   if (!/^[a-zA-Z][a-zA-Z0-9]*$/.test(name)) throw new TypeError("Invalid component authoring name");
   const effective = { ...base.parameters };
@@ -6569,6 +6569,8 @@ function defineComponent({ name, tag: tag2, base, mixins = [], parameters: param
     command,
     mixins: Object.freeze([...mixins]),
     parameters: freeze(structuredClone(effective)),
+    childParameters: freeze(structuredClone(childParameters)),
+    sourceContext,
     implementation
   });
 }
@@ -6625,7 +6627,9 @@ var ComponentCollection = class {
           parameters: structuredClone(component.parameters),
           presentationDefaults: [...component.presentationDefaults],
           dataScope: component.dataScope,
-          command: component.command
+          command: component.command,
+          ...Object.keys(component.childParameters).length ? { childParameters: structuredClone(component.childParameters) } : {},
+          ...component.sourceContext ? { sourceContext: true } : {}
         } }
       }]))
     };
@@ -23116,12 +23120,12 @@ var SVG_NS = "http://www.w3.org/2000/svg";
 // node_modules/@gramlot/gramlot/src/components/popup.js
 var VIEWPORT_MARGIN = 8;
 var ANCHOR_GAP = 3;
-function positionPopup(popup, anchor, { align = "start", matchWidth = false } = {}) {
+function positionPopup(popup, anchor, { align = "start", matchWidth = false, inset = 0 } = {}) {
   const view = anchor.ownerDocument.defaultView;
   const field = anchor.getBoundingClientRect();
   const availableWidth = Math.max(0, view.innerWidth - 2 * VIEWPORT_MARGIN);
   popup.style.setProperty("--gramlot-popup-available-width", `${availableWidth}px`);
-  if (matchWidth) popup.style.width = `${Math.min(field.width, availableWidth)}px`;
+  if (matchWidth) popup.style.width = `${Math.min(Math.max(0, field.width - 2 * inset), availableWidth)}px`;
   popup.style.removeProperty("--gramlot-popup-available-height");
   const natural = popup.getBoundingClientRect();
   const below = Math.max(0, view.innerHeight - VIEWPORT_MARGIN - field.bottom - ANCHOR_GAP);
@@ -23129,7 +23133,7 @@ function positionPopup(popup, anchor, { align = "start", matchWidth = false } =
   const upwards = natural.height > below && above > below;
   popup.style.setProperty("--gramlot-popup-available-height", `${upwards ? above : below}px`);
   const size = popup.getBoundingClientRect();
-  const left = align === "end" ? field.right - size.width : field.left;
+  const left = align === "end" ? field.right - size.width - inset : field.left + inset;
   const top = upwards ? field.top - size.height - ANCHOR_GAP : field.bottom + ANCHOR_GAP;
   popup.style.left = `${Math.max(VIEWPORT_MARGIN, Math.min(left, view.innerWidth - size.width - VIEWPORT_MARGIN))}px`;
   popup.style.top = `${Math.max(VIEWPORT_MARGIN, Math.min(top, view.innerHeight - size.height - VIEWPORT_MARGIN))}px`;
@@ -23856,6 +23860,7 @@ function ChoiceEditor(HTMLElement) {
       const doc = this.ownerDocument;
       const style = doc.createElement("style");
       style.textContent = `.option{position:relative} #control{width:100%;padding-right:calc(var(--gramlot-choice-toggle-width,1.6em) + .2em)}
+                #control:focus-visible{outline:1px solid var(--gramlot-border-control,#7a8798);outline-offset:-3px}
                 .toggle{position:absolute;right:0;top:0;bottom:0;width:var(--gramlot-choice-toggle-width,1.6em);min-width:0;min-height:0;font:inherit;font-size:var(--gramlot-field-font-size,1em);padding:0;border:0;background:transparent;color:inherit}
                 .choices{max-width:var(--gramlot-popup-available-width,100vw);position:fixed;inset:auto;margin:0;padding:var(--gramlot-popup-padding,4px);box-sizing:border-box;max-height:min(var(--gramlot-choice-max-height,12rem),var(--gramlot-popup-available-height,100vh));overflow:auto;
                     border:1px solid var(--gramlot-border-control,#aab4c2);border-radius:var(--gramlot-radius-sm,4px);background:var(--gramlot-surface,Canvas);color:var(--gramlot-ink,CanvasText);font:inherit;box-shadow:var(--gramlot-shadow,0 3px 9px #0002)}
@@ -24051,7 +24056,8 @@ function ChoiceEditor(HTMLElement) {
       this.choices.hidden = false;
       this.choices.showPopover();
       this.#opened = true;
-      positionPopup(this.choices, this.control, { matchWidth: true });
+      const inset = parseFloat(view.getComputedStyle(this).getPropertyValue("--gramlot-choice-popup-inset") || "2");
+      positionPopup(this.choices, this.control, { matchWidth: true, inset });
       this.control.setAttribute("aria-expanded", "true");
       this.activate(0);
       const close = () => this.closeChoices();