@wix/origami-system-components 1.10.8 → 1.10.10

package/README.md

@@ -22,9 +22,10 @@ React and its own `UnsupportedWidgetPlaceholder.css`, which the build copies to
 
 There is one Page skin, no `Page_*` exports, and no Thunderbolt-generated components
 (PageSections, PinnedLayer, ResponsiveContainer, PagesContainer, PageGroup,
-HeaderContainer, FooterContainer, ResponsivePopupPage). Anchor supports future
-`SCROLL_TO_TOP` / `SCROLL_TO_BOTTOM` work. Logic and HOCs come from wix-next's
-system-core, without depending on that package; Page is renamed and defaults added.
+HeaderContainer, FooterContainer, ResponsivePopupPage). Anchor is for exported user
+anchors; layout Page renders the top/bottom scroll targets itself. Logic and HOCs come
+from wix-next's system-core, without depending on that package; Page is renamed and
+defaults added.
 The controller still passes empty services and accepts no services argument.
 
 ## Importing
@@ -176,8 +177,14 @@ This uses import bindings rather than runtime component names and leaves the
 authored structure unchanged for round trips. Outside the site's build pipeline,
 pass the slot props directly.
 
-Rendering order is background wrapper, header, one main containing children, footer.
-Absent header/footer add no wrappers; the background and main remain when empty.
+Rendering order is the `#top` target, background wrapper, header, one main containing
+children, footer, viewport layer, and the `#bottom` target.
+Absent header/footer add no wrappers; the background, main and both targets remain when empty.
+The targets are bare, childless divs with no role or ARIA, absolutely positioned at the
+page's top and bottom edge so they take no cell in the authored grid. They are where the
+`#top` / `#bottom` hrefs that link-utils emits for top/bottom anchor links land
+(`#top` also works without an element). Page is the document page: popups must not
+render it, or the IDs would repeat.
 Header/Footer preserve their identities and remain direct Page children. Sections
 are main's descendants, not necessarily its children: a Section with interactions
 renders inside an `<interact-element>` boundary, which the interactions service styles

package/dist/layout/Page.css

@@ -6,6 +6,22 @@
     display: contents;
 }
 
+/* Fragment targets for `#top` / `#bottom` links. Absolute, so they take no cell in the authored grid. */
+.origami-page__anchor {
+    position: absolute;
+    left: 0;
+    width: 0;
+    height: 0;
+}
+
+.origami-page__anchor--top {
+    top: 0;
+}
+
+.origami-page__anchor--bottom {
+    bottom: 0;
+}
+
 .origami-page__background {
     position: absolute;
     top: 0;

package/dist/layout/Page.d.ts

@@ -25,6 +25,9 @@ export interface PageProps {
  * Experimental page composition. Slot semantics are the caller's responsibility;
  * supplied nodes are rendered without component-type or cardinality validation.
  * Authored CSS owns foreground layout and positioning. Main has no layout box.
+ *
+ * Page is the document page: it renders the document's only `#top` / `#bottom` scroll
+ * targets, so popups must not render it.
  */
 export declare function Page({ id, className, backgroundLayer, header, footer, children, viewportLayer }: PageProps): import("react").JSX.Element;
 export default Page;

package/dist/layout/Page.js

@@ -6,8 +6,11 @@ import './Page.css';
  * Experimental page composition. Slot semantics are the caller's responsibility;
  * supplied nodes are rendered without component-type or cardinality validation.
  * Authored CSS owns foreground layout and positioning. Main has no layout box.
+ *
+ * Page is the document page: it renders the document's only `#top` / `#bottom` scroll
+ * targets, so popups must not render it.
  */
 export function Page({ id, className, backgroundLayer, header, footer, children, viewportLayer }) {
-    return (_jsxs("div", { id: id, className: ['origami-page', className].filter(Boolean).join(' '), children: [_jsx("div", { className: "origami-page__background", children: backgroundLayer }), header, _jsx("main", { className: "origami-page__main", children: children }), footer, viewportLayer?.length ? _jsx("div", { className: "origami-page__viewport-layer", children: viewportLayer }) : null] }));
+    return (_jsxs("div", { id: id, className: ['origami-page', className].filter(Boolean).join(' '), children: [_jsx("div", { id: "top", className: "origami-page__anchor origami-page__anchor--top" }), _jsx("div", { className: "origami-page__background", children: backgroundLayer }), header, _jsx("main", { className: "origami-page__main", children: children }), footer, viewportLayer?.length ? _jsx("div", { className: "origami-page__viewport-layer", children: viewportLayer }) : null, _jsx("div", { id: "bottom", className: "origami-page__anchor origami-page__anchor--bottom" })] }));
 }
 export default Page;

package/dist/layout/Section.css

@@ -0,0 +1,9 @@
+/* Sections (and Header/Footer Sections) are always a single-cell grid around
+   their InternalContainer, so the component owns that layout instead of layout.css.
+   :where() keeps specificity at 0, so the instance's layout.css rule (e.g.
+   `display: none` for hidden) always wins. */
+:where(.origami-section) {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: min-content;
+}

package/dist/layout/Section.css.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/layout/Section.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import './Section.css';
 export interface SectionProps {
     id: string;
     className?: string | undefined;

package/dist/layout/Section.js

@@ -1,12 +1,14 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { withInteractions } from '@wix/origami-runtime';
+import './Section.css';
 /**
  * Experimental plain Section. The authored InternalContainer child owns its
  * background and content layers; this component does not create another container.
+ * It owns the constant single-cell grid that hosts that InternalContainer.
  */
 function BaseSection({ id, className, children }) {
-    return (_jsx("section", { id: id, className: className, tabIndex: -1, children: children }));
+    return (_jsx("section", { id: id, className: ['origami-section', className].filter(Boolean).join(' '), tabIndex: -1, children: children }));
 }
 const InteractiveSection = withInteractions(BaseSection);
 export function Section(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-system-components",
-  "version": "1.10.8",
+  "version": "1.10.10",
   "description": "Editor structural and system components for standalone Origami sites",
   "sideEffects": [
     "**/*.css"
@@ -132,5 +132,5 @@
     "@wix/builder-state": "^1.49.3",
     "@wix/editor-components": "^1.16.0"
   },
-  "falconPackageHash": "411984e75a931f6a742ab4fd846eb1484b9d602c1591a1b880bbf9df"
+  "falconPackageHash": "6a7a0040d3cd19fabab991ceab564e9e0273bd1e7e148eed7d1f370f"
 }