@orderlyshop/web-components 0.1.0-build.7059 → 0.1.0-build.7060

package/README.md

@@ -563,11 +563,11 @@ collection.query = searchQuery;
 - `orderly-home-page` composes page layout, responsive primary navigation, one product rail per top-level category, basket icon, basket drawer, product detail dialog, and footer. Configure it with `configureShop({ defaultShop })` plus attributes such as `title`, `eyebrow`, `rail-cta-label`, and `product-href`. The product dialog expand link follows the configured product URL mode, and compact `https://orderly.shop/...` product URLs are preserved when it builds hash or path routes.
 - `orderly-category-page` composes page layout, navigation, search, product grid, product detail, basket icon, and basket around a navigation category. Without properties it uses the package default shop configuration. Override with `configureShop({ defaultShop })` once per shop, set `base-url` or `product-href` in markup, or assign `category`, `navigationItems`, `sortOptions`, `client`, `defaultQuery`, and `basketController` from JavaScript for advanced cases. The product dialog expand link uses the configured product URL mode and still supports explicit per-page `product-href` overrides when a shop wants a different physical product page URL.
 - `orderly-checkout-page` composes page layout, responsive primary navigation, checkout form, basket order summary, footer, shared basket state, delivery loading, and order-created cleanup. Delivery methods render as radio cards after address entry, service points render as radio-card pickup choices when required, and delivery changes verify the draft so totals update. Configure copy through `configureShop({ defaultShop: { checkoutPageTitle, checkoutPageDescription, checkoutOrderTitle, checkoutTermsHref, checkoutLabels, basketLabels } })`, or assign `client`, `basketController`, `navigationItems`, `checkoutLabels`, and `basketLabels` from JavaScript.
-- `orderly-product-detail-page` composes page layout, navigation, product detail, basket drawer, and footer for a product route. Set `share-url`, the `shareUrl` property, or pass `#url=<encoded-share-url>` in the page URL; compact Orderly slugs are restored to `https://orderly.shop/...` before it calls `SearchService.Search` with `SearchQuery.ShareUrl` and renders the resolved `SearchObject`.
+- `orderly-product-detail-page` composes page layout, navigation, product detail, basket drawer, and footer for a product route. Set `share-url`, the `shareUrl` property, or pass `#url=<encoded-share-url>` in the page URL; compact Orderly slugs are restored to `https://orderly.shop/...` before it calls `SearchService.Search` with `SearchQuery.ShareUrl` and renders the resolved `SearchObject`. Shops can tune outer gutters with `--orderly-product-detail-page-padding`, `--orderly-product-detail-page-mobile-padding`, `--orderly-product-detail-page-inline-padding`, and `--orderly-product-detail-page-mobile-inline-padding`.
 - `orderly-stored-image` accepts `image: StoredImage`, resolves image URLs from the configured prefix, and applies `RotationDeg`, crop, and full-size metadata in the browser.
 - `orderly-credit` accepts `credit: Credit` or declarative `amount` and `currency` attributes, then renders stylable money markup. DKK values are formatted as `kr. <pris>`, for example `kr. 100,00`.
 - `orderly-product-tile` accepts `product: SearchObject` and emits `orderly-product-selected`, `orderly-add-to-basket`, and `orderly-remove-from-basket`. Templates can bind the product share URL with `data-orderly-bind="share-url"`; anchors without an existing `href` keep the raw share URL, while anchors that already point at a product page are rewritten to the configured physical product route using hash or path mode. Default tiles and statically hydrated category tiles include `schema.org/Product` and `schema.org/Offer` microdata for name, image, URL, description, SKU, brand, price, currency, and in-stock availability when those fields are present. When a `BasketController` is assigned through `basketController`, the default action button toggles between add and remove, using an icon-only button next to the price.
-- `orderly-product-page` accepts `product: SearchObject`, renders all product image thumbnails, switches the selected image on thumbnail click, and exposes product details plus add-to-basket behavior. Product-page templates bind `title`, `description`, `brand`, `size`, `color`, `condition`, `price`, `image`, `addLabel`, and `closeLabel`; they also support `basket-action-label`, `basket-action-icon`, and `basket-action-state` so product-page add-to-basket markup can share the same binding names as product tiles.
+- `orderly-product-page` accepts `product: SearchObject`, renders all product image thumbnails, switches the selected image on thumbnail click, and exposes product details plus add-to-basket behavior. Product-page templates bind `title`, `description`, `brand`, `size`, `color`, `condition`, `price`, `image`, `addLabel`, and `closeLabel`; they also support `basket-action-label`, `basket-action-icon`, and `basket-action-state` so product-page add-to-basket markup can share the same binding names as product tiles. Main image frame styling lives on the default wrapper, not the inner `orderly-stored-image`, and shops can tune spacing/image framing with `--orderly-product-page-gap`, `--orderly-product-page-mobile-gap`, `--orderly-product-page-media-gap`, `--orderly-product-page-padding`, `--orderly-product-page-mobile-padding`, `--orderly-product-page-details-padding`, `--orderly-product-page-mobile-details-padding`, `--orderly-product-page-image-border`, `--orderly-product-page-image-radius`, and `--orderly-product-page-image-background`.
 - `orderly-search-box` binds to a target `orderly-product-grid`. Use `mode="textbox"` for an inline search input or `mode="icon"` for a header icon that opens a full-page search overlay. Icon mode searches automatically with a 500ms debounce and renders matching product tiles below the search field. Default home and category pages use icon mode next to the basket icon.
 - `orderly-product-grid` accepts `query: SearchQuery`, merges the configured shop query scope, calls `SearchService.Search`, renders its own sort control from `sortOptions`, supports opaque `ContinuationToken` paging, manual paging, dynamic/infinite scroll, and default loading placeholders while the first page is pending.
 - `orderly-product-rail` accepts `query: SearchQuery`, title, CTA label, and CTA href, then renders the search as a horizontal scroll list by composing `orderly-product-grid`. It is useful for homepages and editorial rows where several category searches should be stacked vertically.

package/dist/browser/orderly-web-components.define.global.js

@@ -293,6 +293,20 @@ orderly-shop-footer:not([data-orderly-ready])::before {
   --orderly-product-action-width: 42px;
   --orderly-product-action-height: 34px;
   --orderly-content-max-width: 1280px;
+  --orderly-product-detail-page-padding: 30px 0 48px;
+  --orderly-product-detail-page-mobile-padding: 24px 0 36px;
+  --orderly-product-detail-page-inline-padding: 24px;
+  --orderly-product-detail-page-mobile-inline-padding: 18px;
+  --orderly-product-page-gap: 2rem;
+  --orderly-product-page-mobile-gap: var(--orderly-product-page-media-gap);
+  --orderly-product-page-media-gap: 0.85rem;
+  --orderly-product-page-padding: 1.25rem;
+  --orderly-product-page-mobile-padding: 0;
+  --orderly-product-page-details-padding: 0;
+  --orderly-product-page-mobile-details-padding: 0 1rem 1rem;
+  --orderly-product-page-image-border: 1px solid var(--orderly-color-image-border);
+  --orderly-product-page-image-radius: var(--orderly-radius-image);
+  --orderly-product-page-image-background: var(--orderly-color-surface);
   color: var(--orderly-color-text);
   font-family: Roboto, "Segoe UI", Arial, sans-serif;
   line-height: 1.5;
@@ -1618,7 +1632,7 @@ input.orderly-search-box,
   gap: 34px;
   max-width: 100%;
   min-width: 0;
-  padding: 30px 0 48px;
+  padding: var(--orderly-product-detail-page-padding);
   overflow: hidden;
 }
 
@@ -1626,8 +1640,8 @@ input.orderly-search-box,
 .orderly-product-detail-page,
 .orderly-product-detail-page__product {
   width: 100%;
-  padding-right: 24px;
-  padding-left: 24px;
+  padding-right: var(--orderly-product-detail-page-inline-padding);
+  padding-left: var(--orderly-product-detail-page-inline-padding);
 }
 
 .orderly-home-page__eyebrow {
@@ -2248,12 +2262,12 @@ orderly-product-tile[data-orderly-clickable]:focus-visible {
 .orderly-product-page {
   display: grid;
   grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
-  gap: 2rem;
+  gap: var(--orderly-product-page-gap);
   align-items: start;
   clear: both;
   min-width: 0;
   max-width: 100%;
-  padding: 1.25rem;
+  padding: var(--orderly-product-page-padding);
   border: var(--orderly-border);
   border-radius: var(--orderly-radius-panel);
   background: var(--orderly-color-surface);
@@ -2261,7 +2275,7 @@ orderly-product-tile[data-orderly-clickable]:focus-visible {
 
 .orderly-product-page__media {
   display: grid;
-  gap: 0.85rem;
+  gap: var(--orderly-product-page-media-gap);
   align-content: start;
   justify-self: stretch;
   width: 100%;
@@ -2273,17 +2287,18 @@ orderly-product-tile[data-orderly-clickable]:focus-visible {
   width: 100%;
   min-width: 0;
   padding: 0;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
+  border: var(--orderly-product-page-image-border);
+  border-radius: var(--orderly-product-page-image-radius);
+  background: var(--orderly-product-page-image-background);
   color: inherit;
   cursor: zoom-in;
+  overflow: hidden;
 }
 
 .orderly-product-page__image-button:hover,
 .orderly-product-page__image-button:focus-visible {
-  border: 0;
-  background: transparent;
+  border: var(--orderly-product-page-image-border);
+  background: var(--orderly-product-page-image-background);
   color: inherit;
   box-shadow: none;
   outline: var(--orderly-focus-outline);
@@ -2295,8 +2310,13 @@ orderly-product-tile[data-orderly-clickable]:focus-visible {
 }
 
 .orderly-product-page__image {
-  border: 1px solid var(--orderly-color-image-border);
-  border-radius: 0;
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+}
+
+.orderly-product-page__image .orderly-stored-image__frame {
+  background: transparent;
 }
 
 .orderly-product-page__image-overlay[hidden] {
@@ -2447,6 +2467,7 @@ orderly-product-tile[data-orderly-clickable]:focus-visible {
   gap: 1rem;
   align-content: start;
   min-width: 0;
+  padding: var(--orderly-product-page-details-padding);
 }
 
 .orderly-product-page__brand,
@@ -3647,7 +3668,7 @@ orderly-product-tile[data-orderly-clickable]:focus-visible {
   .orderly-home-page,
   .orderly-product-detail-page {
     gap: 28px;
-    padding: 24px 0 36px;
+    padding: var(--orderly-product-detail-page-mobile-padding);
   }
 
   .orderly-home-page__intro,
@@ -3656,8 +3677,8 @@ orderly-product-tile[data-orderly-clickable]:focus-visible {
   .orderly-product-rail__header,
   .orderly-product-rail__status,
   .orderly-product-rail__empty {
-    padding-right: 18px;
-    padding-left: 18px;
+    padding-right: var(--orderly-product-detail-page-mobile-inline-padding);
+    padding-left: var(--orderly-product-detail-page-mobile-inline-padding);
   }
 
   .orderly-product-rail__header {
@@ -3703,11 +3724,12 @@ orderly-product-tile[data-orderly-clickable]:focus-visible {
   }
 
   .orderly-product-page {
-    padding: 0;
+    gap: var(--orderly-product-page-mobile-gap);
+    padding: var(--orderly-product-page-mobile-padding);
   }
 
   .orderly-product-page__details {
-    padding: 0 1rem 1rem;
+    padding: var(--orderly-product-page-mobile-details-padding);
   }
 
   .orderly-product-page__title {