@phillips/seldon 1.274.0 → 1.276.0

package/dist/patterns/ObjectTile/ObjectTile.js

@@ -1,26 +1,27 @@
-import { jsxs as m, jsx as e, Fragment as k } from "react/jsx-runtime";
-import { memo as z, forwardRef as F } from "react";
-import I from "../../_virtual/index2.js";
-import { getCommonProps as L } from "../../utils/index.js";
-import { DetailVariants as R } from "../../components/Detail/types.js";
-import W from "../../components/SeldonImage/SeldonImage.js";
+import { jsxs as m, jsx as e, Fragment as V } from "react/jsx-runtime";
+import { memo as k, forwardRef as z } from "react";
+import A from "../../_virtual/index2.js";
+import { getCommonProps as F } from "../../utils/index.js";
+import { DetailVariants as I } from "../../components/Detail/types.js";
+import L from "../../components/SeldonImage/SeldonImage.js";
+import { AspectRatio as W } from "../../components/SeldonImage/types.js";
 import l from "../../components/Text/Text.js";
 import { TextVariants as s } from "../../components/Text/types.js";
-import w from "../../components/DetailList/DetailList.js";
-import A from "../../components/Detail/Detail.js";
-const B = z(
-  F(
+import q from "../../components/DetailList/DetailList.js";
+import w from "../../components/Detail/Detail.js";
+const B = k(
+  z(
     ({
-      badgeText: N,
-      className: f,
+      badgeText: f,
+      className: N,
       children: g,
-      element: $,
-      estimate: n,
-      estimateLabelText: b = "Estimate",
+      element: u,
+      estimate: i,
+      estimateLabelText: $ = "Estimate",
       estimateOnRequestText: t,
       badgeElement: r,
       favoriteElement: o,
-      imageAlt: u = "Brought to you by Phillips",
+      imageAlt: b = "Brought to you by Phillips",
       imageUrl: v = "",
       imageSrcSet: S,
       imageSizes: j,
@@ -32,16 +33,16 @@ const B = z(
       modelText: _,
       referenceNumber: d,
       titleText: h,
-      withdrawnText: i,
+      withdrawnText: n,
       ...p
     }, D) => {
-      const { className: a, ...x } = L(p, "ObjectTile"), O = $ ?? "a", V = n || t;
-      return /* @__PURE__ */ m(O, { ...x, className: I(a, f), ...p, ref: D, children: [
+      const { className: a, ...x } = F(p, "ObjectTile"), O = u ?? "a", R = i || t;
+      return /* @__PURE__ */ m(O, { ...x, className: A(a, N), ...p, ref: D, children: [
         /* @__PURE__ */ e(
-          W,
+          L,
           {
-            alt: u,
-            aspectRatio: "1/1",
+            alt: b,
+            aspectRatio: W.Square,
             className: `${a}__img`,
             objectFit: "contain",
             src: v,
@@ -52,13 +53,13 @@ const B = z(
             imageBlocked: P
           }
         ),
-        i ? null : /* @__PURE__ */ e(l, { element: "span", className: `${a}__badge`, variant: s.badgeSmall, children: N }),
+        n ? null : /* @__PURE__ */ e(l, { element: "span", className: `${a}__badge`, variant: s.badgeSmall, children: f }),
         /* @__PURE__ */ m("div", { className: `${a}__lot-number-like`, children: [
           /* @__PURE__ */ e(l, { element: "span", className: `${a}__lot-number`, variant: s.headingSmall, children: C }),
           r && /* @__PURE__ */ e("div", { className: `${a}__lot-badge`, children: /* @__PURE__ */ e(r, {}) }),
           o && /* @__PURE__ */ e(o, {})
         ] }),
-        i ? /* @__PURE__ */ e(l, { element: "span", className: `${a}__withdrawn`, variant: s.headingSmall, children: i }) : /* @__PURE__ */ m(k, { children: [
+        n ? /* @__PURE__ */ e(l, { element: "span", className: `${a}__withdrawn`, variant: s.headingSmall, children: n }) : /* @__PURE__ */ m(V, { children: [
           /* @__PURE__ */ m("div", { className: `${a}__meta`, children: [
             c ? /* @__PURE__ */ e(l, { element: "span", className: `${a}__maker`, variant: s.headingSmall, children: c }) : null,
             h ? /* @__PURE__ */ e(l, { element: "cite", className: `${a}__title`, variant: s.headingExtraSmall, children: h }) : null,
@@ -73,18 +74,18 @@ const B = z(
             ) : null,
             _ ? /* @__PURE__ */ e(l, { className: `${a}__model`, variant: s.headingExtraSmall, element: "span", children: _ }) : null
           ] }),
-          V ? /* @__PURE__ */ e(
-            w,
+          R ? /* @__PURE__ */ e(
+            q,
             {
               hasSeparators: !0,
               className: `${a}__estimate ${a}__section`,
-              variant: R.sm,
+              variant: I.sm,
               children: /* @__PURE__ */ e(
-                A,
+                w,
                 {
                   className: `${a}__estimate__label`,
-                  label: b,
-                  value: n || t,
+                  label: $,
+                  value: i || t,
                   hasWrap: !1
                 }
               )

package/dist/patterns/SaleHeaderBanner/SaleHeaderBanner.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),z=require("react"),A=require("../../utils/index.cjs"),H=require("../../_virtual/index2.cjs"),O=require("../../types/commonTypes.cjs"),x=require("../../providers/SeldonProvider/utils.cjs"),s=require("../../components/Banner/Banner.cjs"),_=require("../../utils/constants.cjs"),h=require("../../components/Countdown/Countdown.cjs"),j=require("../../components/Banner/types.cjs"),D=require("../../components/PageContentWrapper/PageContentWrapper.cjs"),r=require("../../components/Text/types.cjs"),t=require("../../components/Text/Text.cjs"),F=require("../../components/SeldonImage/SeldonImage.cjs"),f=z.forwardRef(({auctionEndTime:n,auctionTitle:i,badgeText:l,imageSrcUrl:v,imageSrcSet:g,imageSizes:S,imageLoading:q,imageFetchPriority:N,location:p,countdownTimerLabel:$,countdownFormatDuration:b,auctionState:M,occurrenceInformation:B,onClick:Q,children:y,className:T,footerElement:V,headerLabel:k,showTimer:c,getCurrentDateTime:w,...d},C)=>{const{className:a,...P}=A.getCommonProps(d,"SaleHeaderBanner"),o=M===O.AuctionStatus.live,u={endDateTime:n,label:$,formatDurationStr:b,getCurrentDateTime:w};return e.jsxs("div",{...P,className:H.default(a,T),...d,ref:C,children:[o&&n&&c?e.jsx(x.SSRMediaQuery.Media,{lessThan:_.Breakpoints.md,children:e.jsx("div",{className:`${a}__stack__countdown`,children:e.jsx(h.default,{...u,showBottomBorder:!1,centerAlign:!0})})}):null,e.jsxs(s.default,{variant:j.BannerVariants.top,children:[e.jsx(s.default.Content,{children:e.jsx(D.default,{children:e.jsxs("div",{className:`${a}__stack`,children:[o&&n&&c?e.jsx(x.SSRMediaQuery.Media,{greaterThanOrEqual:_.Breakpoints.md,children:e.jsx("div",{className:`${a}__stack__countdown`,children:e.jsx(h.default,{...u,centerAlign:!0})})}):null,e.jsx(s.default.Eyebrow,{variant:r.TextVariants.labelMedium,className:`${a}__header-label`,children:k}),e.jsx(s.default.Title,{variant:r.TextVariants.headingLarge,element:"h1",className:`${a}__title`,children:i}),l&&e.jsx(t.default,{variant:r.TextVariants.badge,className:`${a}__badge`,children:l}),e.jsx(t.default,{variant:r.TextVariants.labelMedium,className:`${a}__location`,children:p}),e.jsxs("div",{className:`${a}__occurrence-details`,children:[B.map(({date:m,occurrenceLabel:R})=>e.jsxs("div",{className:`${a}__occurrence-details-text`,children:[e.jsx(t.default,{variant:r.TextVariants.labelMedium,children:R}),e.jsx(t.default,{variant:r.TextVariants.labelMedium,className:`${a}__date`,children:m})]},String(m))),y]}),V]})})}),e.jsx(s.default.Media,{size:j.BannerMediaSize.half,className:`${a}__image`,children:e.jsx(F.default,{aspectRatio:"16/9",src:v,alt:String(i),objectFit:"cover",srcSet:g,sizes:S,loading:q,fetchPriority:N})})]})]})});f.displayName="SaleHeaderBanner";exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),A=require("react"),z=require("../../utils/index.cjs"),H=require("../../_virtual/index2.cjs"),O=require("../../types/commonTypes.cjs"),x=require("../../providers/SeldonProvider/utils.cjs"),t=require("../../components/Banner/Banner.cjs"),_=require("../../utils/constants.cjs"),h=require("../../components/Countdown/Countdown.cjs"),j=require("../../components/Banner/types.cjs"),D=require("../../components/PageContentWrapper/PageContentWrapper.cjs"),s=require("../../components/Text/types.cjs"),r=require("../../components/Text/Text.cjs"),F=require("../../components/SeldonImage/SeldonImage.cjs"),L=require("../../components/SeldonImage/types.cjs"),f=A.forwardRef(({auctionEndTime:n,auctionTitle:i,badgeText:l,imageSrcUrl:p,imageSrcSet:v,imageSizes:g,imageLoading:q,imageFetchPriority:S,location:N,countdownTimerLabel:$,countdownFormatDuration:b,auctionState:M,occurrenceInformation:B,onClick:Q,children:y,className:T,footerElement:R,headerLabel:V,showTimer:c,getCurrentDateTime:k,...d},w)=>{const{className:a,...C}=z.getCommonProps(d,"SaleHeaderBanner"),o=M===O.AuctionStatus.live,u={endDateTime:n,label:$,formatDurationStr:b,getCurrentDateTime:k};return e.jsxs("div",{...C,className:H.default(a,T),...d,ref:w,children:[o&&n&&c?e.jsx(x.SSRMediaQuery.Media,{lessThan:_.Breakpoints.md,children:e.jsx("div",{className:`${a}__stack__countdown`,children:e.jsx(h.default,{...u,showBottomBorder:!1,centerAlign:!0})})}):null,e.jsxs(t.default,{variant:j.BannerVariants.top,children:[e.jsx(t.default.Content,{children:e.jsx(D.default,{children:e.jsxs("div",{className:`${a}__stack`,children:[o&&n&&c?e.jsx(x.SSRMediaQuery.Media,{greaterThanOrEqual:_.Breakpoints.md,children:e.jsx("div",{className:`${a}__stack__countdown`,children:e.jsx(h.default,{...u,centerAlign:!0})})}):null,e.jsx(t.default.Eyebrow,{variant:s.TextVariants.labelMedium,className:`${a}__header-label`,children:V}),e.jsx(t.default.Title,{variant:s.TextVariants.headingLarge,element:"h1",className:`${a}__title`,children:i}),l&&e.jsx(r.default,{variant:s.TextVariants.badge,className:`${a}__badge`,children:l}),e.jsx(r.default,{variant:s.TextVariants.labelMedium,className:`${a}__location`,children:N}),e.jsxs("div",{className:`${a}__occurrence-details`,children:[B.map(({date:m,occurrenceLabel:P})=>e.jsxs("div",{className:`${a}__occurrence-details-text`,children:[e.jsx(r.default,{variant:s.TextVariants.labelMedium,children:P}),e.jsx(r.default,{variant:s.TextVariants.labelMedium,className:`${a}__date`,children:m})]},String(m))),y]}),R]})})}),e.jsx(t.default.Media,{size:j.BannerMediaSize.half,className:`${a}__image`,children:e.jsx(F.default,{aspectRatio:L.AspectRatio.Landscape,src:p,alt:String(i),objectFit:"cover",srcSet:v,sizes:g,loading:q,fetchPriority:S})})]})]})});f.displayName="SaleHeaderBanner";exports.default=f;

package/dist/patterns/SaleHeaderBanner/SaleHeaderBanner.js

@@ -1,21 +1,22 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { forwardRef as R } from "react";
+import { forwardRef as H } from "react";
 import { getCommonProps as D } from "../../utils/index.js";
 import F from "../../_virtual/index2.js";
-import { AuctionStatus as O } from "../../types/commonTypes.js";
-import { SSRMediaQuery as p } from "../../providers/SeldonProvider/utils.js";
+import { AuctionStatus as L } from "../../types/commonTypes.js";
+import { SSRMediaQuery as h } from "../../providers/SeldonProvider/utils.js";
 import n from "../../components/Banner/Banner.js";
 import { Breakpoints as f } from "../../utils/constants.js";
 import u from "../../components/Countdown/Countdown.js";
-import { BannerVariants as V, BannerMediaSize as q } from "../../components/Banner/types.js";
-import I from "../../components/PageContentWrapper/PageContentWrapper.js";
+import { BannerVariants as O, BannerMediaSize as V } from "../../components/Banner/types.js";
+import q from "../../components/PageContentWrapper/PageContentWrapper.js";
 import { TextVariants as r } from "../../components/Text/types.js";
 import t from "../../components/Text/Text.js";
-import L from "../../components/SeldonImage/SeldonImage.js";
-const Q = R(
+import I from "../../components/SeldonImage/SeldonImage.js";
+import { AspectRatio as Q } from "../../components/SeldonImage/types.js";
+const T = H(
   ({
-    auctionEndTime: l,
-    auctionTitle: o,
+    auctionEndTime: o,
+    auctionTitle: l,
     badgeText: s,
     imageSrcUrl: v,
     imageSrcSet: N,
@@ -27,45 +28,45 @@ const Q = R(
     countdownFormatDuration: M,
     auctionState: w,
     occurrenceInformation: C,
-    onClick: T,
+    onClick: W,
     children: k,
     className: x,
     footerElement: P,
     headerLabel: y,
     showTimer: m,
-    getCurrentDateTime: j,
+    getCurrentDateTime: A,
     ...c
-  }, z) => {
-    const { className: a, ...A } = D(c, "SaleHeaderBanner"), d = w === O.live, _ = {
-      endDateTime: l,
+  }, R) => {
+    const { className: a, ...j } = D(c, "SaleHeaderBanner"), d = w === L.live, p = {
+      endDateTime: o,
       label: B,
       formatDurationStr: M,
-      getCurrentDateTime: j
+      getCurrentDateTime: A
     };
-    return /* @__PURE__ */ i("div", { ...A, className: F(a, x), ...c, ref: z, children: [
-      d && l && m ? /* @__PURE__ */ e(p.Media, { lessThan: f.md, children: /* @__PURE__ */ e("div", { className: `${a}__stack__countdown`, children: /* @__PURE__ */ e(u, { ..._, showBottomBorder: !1, centerAlign: !0 }) }) }) : null,
-      /* @__PURE__ */ i(n, { variant: V.top, children: [
-        /* @__PURE__ */ e(n.Content, { children: /* @__PURE__ */ e(I, { children: /* @__PURE__ */ i("div", { className: `${a}__stack`, children: [
-          d && l && m ? /* @__PURE__ */ e(p.Media, { greaterThanOrEqual: f.md, children: /* @__PURE__ */ e("div", { className: `${a}__stack__countdown`, children: /* @__PURE__ */ e(u, { ..._, centerAlign: !0 }) }) }) : null,
+    return /* @__PURE__ */ i("div", { ...j, className: F(a, x), ...c, ref: R, children: [
+      d && o && m ? /* @__PURE__ */ e(h.Media, { lessThan: f.md, children: /* @__PURE__ */ e("div", { className: `${a}__stack__countdown`, children: /* @__PURE__ */ e(u, { ...p, showBottomBorder: !1, centerAlign: !0 }) }) }) : null,
+      /* @__PURE__ */ i(n, { variant: O.top, children: [
+        /* @__PURE__ */ e(n.Content, { children: /* @__PURE__ */ e(q, { children: /* @__PURE__ */ i("div", { className: `${a}__stack`, children: [
+          d && o && m ? /* @__PURE__ */ e(h.Media, { greaterThanOrEqual: f.md, children: /* @__PURE__ */ e("div", { className: `${a}__stack__countdown`, children: /* @__PURE__ */ e(u, { ...p, centerAlign: !0 }) }) }) : null,
           /* @__PURE__ */ e(n.Eyebrow, { variant: r.labelMedium, className: `${a}__header-label`, children: y }),
-          /* @__PURE__ */ e(n.Title, { variant: r.headingLarge, element: "h1", className: `${a}__title`, children: o }),
+          /* @__PURE__ */ e(n.Title, { variant: r.headingLarge, element: "h1", className: `${a}__title`, children: l }),
           s && /* @__PURE__ */ e(t, { variant: r.badge, className: `${a}__badge`, children: s }),
           /* @__PURE__ */ e(t, { variant: r.labelMedium, className: `${a}__location`, children: b }),
           /* @__PURE__ */ i("div", { className: `${a}__occurrence-details`, children: [
-            C.map(({ date: h, occurrenceLabel: H }) => /* @__PURE__ */ i("div", { className: `${a}__occurrence-details-text`, children: [
-              /* @__PURE__ */ e(t, { variant: r.labelMedium, children: H }),
-              /* @__PURE__ */ e(t, { variant: r.labelMedium, className: `${a}__date`, children: h })
-            ] }, String(h))),
+            C.map(({ date: _, occurrenceLabel: z }) => /* @__PURE__ */ i("div", { className: `${a}__occurrence-details-text`, children: [
+              /* @__PURE__ */ e(t, { variant: r.labelMedium, children: z }),
+              /* @__PURE__ */ e(t, { variant: r.labelMedium, className: `${a}__date`, children: _ })
+            ] }, String(_))),
             k
           ] }),
           P
         ] }) }) }),
-        /* @__PURE__ */ e(n.Media, { size: q.half, className: `${a}__image`, children: /* @__PURE__ */ e(
-          L,
+        /* @__PURE__ */ e(n.Media, { size: V.half, className: `${a}__image`, children: /* @__PURE__ */ e(
+          I,
           {
-            aspectRatio: "16/9",
+            aspectRatio: Q.Landscape,
             src: v,
-            alt: String(o),
+            alt: String(l),
             objectFit: "cover",
             srcSet: N,
             sizes: g,
@@ -77,7 +78,7 @@ const Q = R(
     ] });
   }
 );
-Q.displayName = "SaleHeaderBanner";
+T.displayName = "SaleHeaderBanner";
 export {
-  Q as default
+  T as default
 };

package/dist/scss/components/SeldonImage/_seldonImage.scss

@@ -1,6 +1,8 @@
 @use '../../allPartials' as *;
 
 .#{$px}-seldon-image {
+  // Propagate an ancestor `max-height` down to the wrapper so the img can inherit it too (percentages resolve to `none` when parent height is auto; `inherit` doesn't).
+  max-height: inherit;
   overflow: hidden;
   position: relative;
 
@@ -14,9 +16,28 @@
     }
   }
 
+  // Portrait/square can overflow vertically; auto dims + max caps let the img respect parent max-height, not just width.
+  &--aspect-ratio-3-4 {
+    img {
+      aspect-ratio: 3 / 4;
+      height: auto;
+      max-height: inherit;
+      max-width: 100%;
+      width: auto;
+    }
+
+    &.#{$px}-seldon-image--error-image {
+      aspect-ratio: 3 / 4;
+    }
+  }
+
   &--aspect-ratio-1-1 {
     img {
       aspect-ratio: 1 / 1;
+      height: auto;
+      max-height: inherit;
+      max-width: 100%;
+      width: auto;
     }
 
     &.#{$px}-seldon-image--error-image {

package/dist/scss/patterns/FiltersInline/_filterDropdownMenu.scss

@@ -26,11 +26,6 @@ $dropdown-width: 320px;
     }
   }
 
-  &__button-wrap {
-    display: flex;
-    justify-content: flex-end;
-  }
-
   &__buttons-wrap {
     border-top: 1px solid $bg-border;
     display: flex;
@@ -65,6 +60,12 @@ $dropdown-width: 320px;
     padding-bottom: calc(#{$spacing-sm} + env(safe-area-inset-bottom));
   }
 
+  // Sort dropdown has no footer buttons; this spacer preserves the safe-area
+  // inset so the last option stays clear of the iOS home indicator.
+  &__mobile-safe-area {
+    padding-bottom: calc(#{$spacing-sm} + env(safe-area-inset-bottom));
+  }
+
   &__header {
     margin-bottom: $spacing-sm;
     margin-top: 0;
@@ -74,21 +75,6 @@ $dropdown-width: 320px;
     }
   }
 
-  &__button {
-    align-self: flex-end;
-    padding: $spacing-sm $spacing-md;
-
-    &--text {
-      text-wrap: nowrap;
-    }
-
-    &--mobile {
-      display: block;
-      margin: $spacing-sm auto $spacing-md auto;
-      width: 80%;
-    }
-  }
-
   &__button-text {
     color: $white-100;
   }
@@ -119,6 +105,9 @@ $dropdown-width: 320px;
     align-self: center;
     margin-left: auto;
   }
+  .#{$px}-input__input[type='checkbox']:disabled {
+    border-color: $keyline-gray;
+  }
   .#{$px}-input__input[type='checkbox'] {
     align-self: center;
     appearance: none;
@@ -159,6 +148,14 @@ $dropdown-width: 320px;
   max-height: 2rem;
 }
 
+// Filter option labels use the labels/label-small-bold type token.
+.#{$px}-filter-dropdown-menu,
+.#{$px}-filter-drawer-menu {
+  .#{$px}-input__label.#{$px}-text {
+    @include label-styles($font-size: $font-size-label-small, $font-weight: 600);
+  }
+}
+
 .#{$px}-filter-drawer-mobile {
   height: min(70dvh, 640px);
   padding: 0;
@@ -186,6 +183,10 @@ $dropdown-width: 320px;
     flex: 0 0 auto;
     margin-top: 0;
   }
+
+  .#{$px}-filter-dropdown-menu__mobile-safe-area {
+    flex: 0 0 auto;
+  }
 }
 
 .#{$px}-filter-drawer {

package/dist/scss/patterns/FiltersInline/_filtersInline.scss

@@ -5,7 +5,9 @@
   flex-wrap: wrap;
   gap: $spacing-sm;
 
-  // Desktop: align the Sort filter (and anything following it) to the right of the filter row.
+  // Desktop: align the Sort filter to the right of the filter row. The Sort
+  // pill is already rendered last in the DOM (see FiltersInline.tsx) so visual
+  // and tab order match; this just pushes it to the right edge.
   @include media($breakpoint-md) {
     > .#{$px}-filters-inline__sort {
       margin-left: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.274.0",
+  "version": "1.276.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"