@oods/components-vue 0.4.0 → 0.4.1

package/dist/index.js

@@ -1,5 +1,5 @@
-import { defineComponent, h, useId, computed, ref, onMounted, watch, nextTick, onBeforeUnmount, isVNode, Text as Text$1, Comment, Fragment } from 'vue';
-import { vizPreviewLayers, svgCarriesTitle, formatPriceAmount, formatPriceCode, formatReferenceLabel, summaryValue, formatDateTime, dateTimeInputValue, formatReadOnlyValue, BILLING_MINOR_UNITS, billingSummary, formatBillingAmount, billingAmountText, billingAmountMessage, parseBillingAmount, BILLING_INTERVALS, billingIntervalMessage, billingCycle, auditSummary, initialSort, ariaSort, nextSort, recipeItemLabels, DEFAULT_COLOR_STATES, geoFieldMapping, STATUS_ICON_SVG_ATTRS, STATUS_ICON_SHAPES, getStatusPresentation, resolveStatusIcon, currencyMinorUnits, billingPaymentSummary, billingPaymentRows, traitEventRows, vizControlFields, VIZ_CONTROL_TITLES, vizFieldValue, vizSummaryRows, editVizIntent } from '@oods/component-contracts';
+import { defineComponent, h, useId, computed, ref, onMounted, onBeforeUnmount, watch, nextTick, isVNode, Text as Text$1, Comment, Fragment } from 'vue';
+import { vizPreviewLayers, svgCarriesTitle, formatPriceAmount, formatPriceCode, formatReferenceLabel, ownershipPhrase, summaryValue, formatDateTime, dateTimeInputValue, formatReadOnlyValue, BILLING_MINOR_UNITS, billingSummary, formatBillingAmount, billingAmountText, billingAmountMessage, parseBillingAmount, BILLING_INTERVALS, billingIntervalMessage, billingCycle, auditSummary, initialSort, ariaSort, nextSort, recipeItemLabels, DEFAULT_COLOR_STATES, geoFieldMapping, STATUS_ICON_SVG_ATTRS, STATUS_ICON_SHAPES, getStatusPresentation, resolveStatusIcon, currencyMinorUnits, billingPaymentSummary, billingPaymentRows, traitEventRows, vizControlFields, VIZ_CONTROL_TITLES, vizFieldValue, vizSummaryRows, editVizIntent } from '@oods/component-contracts';
 
 // src/primitives.ts
 function statusIcon(name) {
@@ -185,6 +185,31 @@ var Button = defineComponent({
   }
 });
 var canShowModal = () => typeof HTMLDialogElement !== "undefined" && typeof HTMLDialogElement.prototype.showModal === "function";
+var pageLocks = 0;
+var pageStyle;
+function lockPageScroll() {
+  const page = document.documentElement;
+  if (pageLocks++ === 0) {
+    const scrollbar = window.innerWidth - page.clientWidth;
+    pageStyle = { overflow: page.style.overflow, paddingRight: page.style.paddingRight };
+    if (scrollbar > 0) page.style.paddingRight = `${parseFloat(getComputedStyle(page).paddingRight) + scrollbar}px`;
+    page.style.overflow = "hidden";
+  }
+  let held = true;
+  return () => {
+    if (!held) return;
+    held = false;
+    if (--pageLocks === 0 && pageStyle) {
+      page.style.overflow = pageStyle.overflow;
+      page.style.paddingRight = pageStyle.paddingRight;
+      pageStyle = void 0;
+    }
+  };
+}
+var outsideBox = (event, dialog) => {
+  const box = dialog.getBoundingClientRect();
+  return event.clientX < box.left || event.clientX > box.right || event.clientY < box.top || event.clientY > box.bottom;
+};
 var Dialog = defineComponent({
   name: "OodsDialog",
   props: {
@@ -206,15 +231,24 @@ var Dialog = defineComponent({
     const element = ref(null);
     const mounted = ref(false);
     const managed = computed(() => props.modal && mounted.value && canShowModal());
+    let unlockScroll;
+    let pressedBackdrop = false;
+    const releaseScroll = () => {
+      unlockScroll?.();
+      unlockScroll = void 0;
+    };
     const sync = () => {
       const dialog = element.value;
       if (!dialog || !managed.value) return;
-      if (props.open && !dialog.open) dialog.showModal();
-      else if (!props.open && dialog.open) dialog.close();
+      if (props.open && !dialog.open) {
+        dialog.showModal();
+        unlockScroll ??= lockPageScroll();
+      } else if (!props.open && dialog.open) dialog.close();
     };
     onMounted(() => {
       mounted.value = true;
     });
+    onBeforeUnmount(releaseScroll);
     watch([() => props.open, managed], sync, { flush: "post" });
     const requestClose = (event) => {
       event.preventDefault();
@@ -237,10 +271,23 @@ var Dialog = defineComponent({
           if (event.key === "Escape" && !event.defaultPrevented) requestClose(event);
         },
         onCancel: requestClose,
-        // The browser closed it (a close request it would not let be cancelled) while open is still true. A close event
-        // from moving a mounted dialog into the top layer finds it open again, and is not reported.
+        // A close event from moving a mounted dialog into the top layer finds it open again, and is not reported. Any other
+        // close releases the page; when the browser closed it (a close request it would not let be cancelled) while open is
+        // still true, it is reported.
         onClose: () => {
-          if (props.open && !element.value?.open) emit("close");
+          if (element.value?.open) return;
+          releaseScroll();
+          if (props.open) emit("close");
+        },
+        onMousedown: (event) => {
+          pressedBackdrop = managed.value && event.target === event.currentTarget && outsideBox(event, event.currentTarget);
+        },
+        // s223-m02 (#2527 ruling 13b): a click on the backdrop emits close, as the close control does. A press that began
+        // inside the dialog (text selected and dragged out) is not a backdrop click.
+        onClick: (event) => {
+          const backdrop = pressedBackdrop && event.target === event.currentTarget && outsideBox(event, event.currentTarget);
+          pressedBackdrop = false;
+          if (backdrop) emit("close");
         }
       }, [
         h("div", { class: "oods-dialog__header" }, [
@@ -803,12 +850,15 @@ function createBadgeFamily(options) {
   };
   for (const key of options.extraProps) props[key] = String;
   for (const key of options.booleanProps ?? []) props[key] = { type: [String, Boolean], default: void 0 };
+  if (options.booleanProps) props.hideWhenFalse = { type: [Boolean, String], default: void 0 };
   return defineComponent({
     name: `Oods${options.component}`,
     props,
     setup(componentProps, { slots }) {
       return () => {
         const record = componentProps;
+        const flag = options.booleanProps?.map((key) => record[key]).find((value) => typeof value === "boolean");
+        if (record.hideWhenFalse === true && flag === false) return null;
         const content = authoredContent(slots.default?.());
         const scalar = scalarContent(content);
         const read = (key) => typeof record[key] === "boolean" && options.booleanProps?.includes(key) ? String(record[key]) : record[key];
@@ -1435,12 +1485,13 @@ var TagSummary = defineComponent({
 });
 var OwnershipMeta = defineComponent({
   name: "OodsOwnershipMeta",
-  props: { title: String, label: String, heading: String, name: String, ownerType: String, owner_type: String, role: String, ownershipRole: String },
+  props: { title: String, label: String, heading: String, name: String, ownerType: String, owner_type: String, role: String, ownershipRole: String, ownerLabel: String },
   setup(props, { slots }) {
     return () => {
       const content = authoredContent(slots.default?.());
       const terms = [["Owner Type", firstScalar(props.ownerType, props.owner_type)], ["Role", firstScalar(props.role, props.ownershipRole)]].filter((entry) => entry[1] !== void 0);
-      return h("div", { class: "oods-ownership-meta", "data-oods-component": "OwnershipMeta", "data-meta-type": "ownership" }, content.length ? content : [
+      const phrase = props.ownerLabel !== void 0 ? ownershipPhrase(props.ownerLabel, firstScalar(props.ownerType, props.owner_type), firstScalar(props.role, props.ownershipRole)) : void 0;
+      return h("div", { class: "oods-ownership-meta", "data-oods-component": "OwnershipMeta", "data-meta-type": "ownership" }, content.length ? content : phrase ? [h("span", { "data-meta-item": "true" }, phrase)] : [
         h("span", { "data-meta-title": "true" }, firstText(props.title, props.label, props.heading, props.name) ?? "Ownership"),
         ...terms.map(([term, value]) => h("span", { key: term, "data-meta-item": "true" }, [h("strong", `${term}:`), ` ${value}`]))
       ]);
@@ -2166,6 +2217,63 @@ var Tabs = defineComponent({
     ]);
   }
 });
+var SegmentedControl = defineComponent({
+  name: "OodsSegmentedControl",
+  props: {
+    id: String,
+    label: String,
+    modelValue: String,
+    value: String,
+    defaultValue: { type: String, default: "" },
+    name: String,
+    size: { type: String, default: "md" },
+    disabled: Boolean,
+    options: { type: Array, default: () => [] }
+  },
+  emits: {
+    "update:modelValue": (_value) => true,
+    change: (_value) => true
+  },
+  setup(props, { emit, slots }) {
+    const generatedId = useId();
+    const internalValue = ref(props.defaultValue);
+    const currentValue = computed(() => props.modelValue ?? props.value ?? internalValue.value);
+    const select = (event) => {
+      const next = event.target.value;
+      if (props.modelValue === void 0 && props.value === void 0) internalValue.value = next;
+      emit("update:modelValue", next);
+      emit("change", next);
+    };
+    return () => {
+      const id = props.id || `oods-segmentedcontrol-${generatedId}`;
+      const label = slots.label?.() ?? props.label;
+      return h("div", {
+        class: "oods-field oods-segmented-control",
+        "data-oods-component": "SegmentedControl",
+        "data-size": props.size
+      }, [
+        h("span", { id: `${id}-label`, class: "oods-field-label" }, [label]),
+        h("div", {
+          id,
+          role: "radiogroup",
+          "aria-labelledby": `${id}-label`,
+          class: "oods-segmented-control__track"
+        }, props.options.map((option) => h("label", { key: option.value, class: "oods-segmented-control__option" }, [
+          h("input", {
+            type: "radio",
+            class: "oods-segmented-control__input",
+            name: props.name || id,
+            value: option.value,
+            checked: option.value === currentValue.value,
+            disabled: props.disabled || option.disabled,
+            onChange: select
+          }),
+          h("span", { class: "oods-segmented-control__label" }, option.label)
+        ])))
+      ]);
+    };
+  }
+});
 function isRecord2(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
@@ -2983,7 +3091,8 @@ var array = Array;
 function eventRecipe(id, kind, title) {
   return defineComponent({ name: id, props: { id: String, title: { type: String, default: title }, archivedAt: String, restoredAt: String, archivedBy: String, reason: String, timestamp: String, code: String, history: array, status: String, showActor: { type: Boolean, default: true }, showReason: { type: Boolean, default: true } }, setup: (props) => () => {
     const rows = traitEventRows(kind, props);
-    return h("article", { id: props.id, class: "oods-trait-recipe", "data-oods-component": id, "aria-label": props.title }, [h("h2", props.title), rows.length ? h("ol", rows.map((row, index) => h("li", { key: index }, [h("strong", row.title), h("p", row.at ? h("time", { datetime: row.at }, row.time) : row.time), row.actor && h("p", `Actor: ${row.actor}`), row.reason && h("p", `Reason: ${row.reason}`), row.code && h("p", `Code: ${row.code}`)]))) : h("p", "No events recorded.")]);
+    if (!rows.length) return null;
+    return h("article", { id: props.id, class: "oods-trait-recipe", "data-oods-component": id, "aria-label": props.title }, [h("h2", props.title), h("ol", rows.map((row, index) => h("li", { key: index }, [h("strong", row.title), h("p", row.at ? h("time", { datetime: row.at }, row.time) : row.time), row.actor && h("p", `Actor: ${row.actor}`), row.reason && h("p", `Reason: ${row.reason}`), row.code && h("p", `Code: ${row.code}`)])))]);
   } });
 }
 var ArchiveEvent = eventRecipe("ArchiveEvent", "archive", "Archive events");
@@ -3084,5 +3193,210 @@ var VizLinePreview = preview("VizLinePreview", "line");
 var VizMarkPreview = preview("VizMarkPreview", "bar");
 var VizPointPreview = preview("VizPointPreview", "scatter");
 var VizScatterPreview = preview("VizScatterPreview", "scatter");
+var Combobox = defineComponent({
+  name: "OodsCombobox",
+  props: {
+    id: String,
+    label: String,
+    options: { type: Array, default: () => [] },
+    modelValue: String,
+    value: String,
+    defaultValue: { type: String, default: "" },
+    placeholder: String,
+    name: String,
+    required: Boolean,
+    disabled: Boolean,
+    help: String,
+    validation: Object,
+    /** The control height, as Button, Input and Select: xs 24, sm 28, md 32 (default) or lg 40. */
+    size: { type: String, default: "md" }
+  },
+  emits: {
+    "update:modelValue": (_value) => true,
+    change: (_value) => true
+  },
+  setup(props, { emit, slots }) {
+    const generatedId = useId();
+    const controlId = computed(() => props.id || `oods-combobox-${generatedId}`);
+    const internalValue = ref(props.defaultValue);
+    const query = ref(null);
+    const open = ref(false);
+    const active = ref(-1);
+    const root = ref(null);
+    const listbox = ref(null);
+    const chosenValue = computed(() => props.modelValue ?? props.value ?? internalValue.value);
+    const chosen = computed(() => props.options.find((option) => option.value === chosenValue.value));
+    const text = computed(() => query.value ?? chosen.value?.label ?? "");
+    const matches = computed(() => {
+      const needle = (query.value ?? "").trim().toLowerCase();
+      return props.options.map((option) => needle === "" || option.label.toLowerCase().includes(needle));
+    });
+    const reachable = computed(() => props.options.flatMap((option, index) => matches.value[index] && !option.disabled ? [index] : []));
+    const optionId = (index) => `${controlId.value}-option-${index}`;
+    const close = () => {
+      open.value = false;
+      active.value = -1;
+    };
+    const commit = (next) => {
+      if (props.modelValue === void 0 && props.value === void 0) internalValue.value = next;
+      emit("update:modelValue", next);
+      emit("change", next);
+    };
+    const pick = (index) => {
+      const option = props.options[index];
+      if (!option || option.disabled) return;
+      query.value = null;
+      close();
+      if (option.value !== chosenValue.value) commit(option.value);
+    };
+    const outside = (event) => {
+      if (!root.value?.contains(event.target)) close();
+    };
+    watch(open, (isOpen) => {
+      if (isOpen) document.addEventListener("pointerdown", outside);
+      else document.removeEventListener("pointerdown", outside);
+    });
+    onBeforeUnmount(() => {
+      if (typeof document !== "undefined") document.removeEventListener("pointerdown", outside);
+    });
+    watch([open, active], async () => {
+      if (!open.value || active.value < 0) return;
+      await nextTick();
+      const element = listbox.value?.children[active.value];
+      element?.scrollIntoView?.({ block: "nearest" });
+    });
+    const keydown = (event) => {
+      if (event.defaultPrevented || props.disabled || event.isComposing) return;
+      const order = reachable.value;
+      const first = order[0] ?? -1;
+      const last = order[order.length - 1] ?? -1;
+      const at = order.indexOf(active.value);
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          active.value = !open.value || at === -1 ? first : order[(at + 1) % order.length];
+          open.value = true;
+          return;
+        case "ArrowUp":
+          event.preventDefault();
+          active.value = !open.value || at <= 0 ? last : order[at - 1];
+          open.value = true;
+          return;
+        case "Home":
+        case "End":
+          if (!open.value) return;
+          event.preventDefault();
+          active.value = event.key === "Home" ? first : last;
+          return;
+        case "Enter":
+          if (!open.value) return;
+          event.preventDefault();
+          if (active.value >= 0) pick(active.value);
+          return;
+        case "Escape":
+          if (open.value) {
+            event.preventDefault();
+            close();
+            return;
+          }
+          if (text.value === "" && chosenValue.value === "") return;
+          event.preventDefault();
+          query.value = null;
+          if (chosenValue.value !== "") commit("");
+          return;
+        case "Tab":
+          if (open.value) close();
+          return;
+      }
+    };
+    return () => {
+      const id = controlId.value;
+      const label = slots.label?.() ?? props.label;
+      const help = slots.help?.() ?? props.help;
+      const validation = slots.validation?.() ?? props.validation?.message;
+      const tone = props.validation ? props.validation.state === "error" ? "critical" : props.validation.state : void 0;
+      const describedBy = [help ? `${id}-help` : void 0, validation ? `${id}-validation` : void 0].filter(Boolean).join(" ") || void 0;
+      const noMatches = open.value && !matches.value.some(Boolean);
+      return h("div", {
+        ref: root,
+        class: "oods-field oods-combobox",
+        ...tone ? { style: { "--cmp-input-message-border": `var(--sys-status-${tone}-border)`, "--cmp-input-message-text": `var(--sys-status-${tone}-text)` } } : {},
+        "data-oods-component": "Combobox",
+        "data-size": props.size,
+        "data-validation-state": props.validation?.state
+      }, [
+        h("label", { id: `${id}-label`, class: "oods-field-label", for: id }, [
+          label,
+          props.required ? h("span", { class: "oods-field-required", "aria-hidden": "true" }, "*") : null
+        ]),
+        h("div", { class: "oods-combobox__control" }, [
+          h("input", {
+            id,
+            type: "text",
+            role: "combobox",
+            class: "oods-field-control oods-combobox__input",
+            value: text.value,
+            placeholder: props.placeholder,
+            autocomplete: "off",
+            "aria-autocomplete": "list",
+            "aria-expanded": open.value ? "true" : "false",
+            "aria-controls": `${id}-listbox`,
+            "aria-activedescendant": open.value && active.value >= 0 ? optionId(active.value) : void 0,
+            "aria-describedby": describedBy,
+            "aria-invalid": props.validation?.state === "error" ? "true" : void 0,
+            required: props.required,
+            disabled: props.disabled,
+            onInput: (event) => {
+              query.value = event.target.value;
+              open.value = true;
+              active.value = -1;
+            },
+            onKeydown: keydown,
+            onClick: () => {
+              if (!props.disabled) open.value = true;
+            },
+            onBlur: () => {
+              query.value = null;
+              close();
+            }
+          }),
+          h("span", { class: "oods-combobox__chevron", "aria-hidden": "true" }, [statusIcon("chevron-down")]),
+          h("div", {
+            class: "oods-combobox__popup",
+            hidden: !open.value,
+            onMousedown: (event) => event.preventDefault()
+          }, [
+            h(
+              "ul",
+              { ref: listbox, id: `${id}-listbox`, class: "oods-combobox__listbox", role: "listbox", "aria-labelledby": `${id}-label` },
+              props.options.map((option, index) => h("li", {
+                key: option.value,
+                id: optionId(index),
+                class: "oods-combobox__option",
+                role: "option",
+                "aria-selected": option.value === chosenValue.value ? "true" : "false",
+                "aria-disabled": option.disabled ? "true" : void 0,
+                "data-value": option.value,
+                "data-active": index === active.value ? "true" : void 0,
+                hidden: !matches.value[index],
+                onClick: () => pick(index),
+                onPointermove: () => {
+                  if (!option.disabled && index !== active.value) active.value = index;
+                }
+              }, [
+                h("span", { class: "oods-combobox__option-label" }, option.label),
+                h("span", { class: "oods-combobox__check", "aria-hidden": "true" }, [statusIcon("check")])
+              ]))
+            ),
+            h("p", { class: "oods-combobox__empty", role: "status" }, noMatches ? "No matches" : "")
+          ])
+        ]),
+        props.name ? h("input", { type: "hidden", name: props.name, value: chosenValue.value }) : null,
+        help ? h("p", { id: `${id}-help`, class: "oods-field-help" }, help) : null,
+        validation ? h("p", { id: `${id}-validation`, class: "oods-field-error", role: props.validation?.state === "error" ? "alert" : void 0 }, validation) : null
+      ]);
+    };
+  }
+});
 
-export { AddressCollectionPanel, AddressEditor, AddressSummaryBadge, AddressValidationTimeline, ArchiveEvent, ArchivePill, ArchiveSummary, ArchivedRowOverlay, AuditEvent, AuditSummaryCard, AuditTimeline, Badge, Banner, BillingAmountInput, BillingCardMeta, BillingIntervalSelector, BillingSummaryBadge, Button, CancellationBadge, CancellationEvent, CancellationForm, CancellationSummary, Card, CardHeader, Checkbox, ClassificationBadge, ClassificationEditor, ClassificationPanel, ColorStatePicker, ColorSwatch, ColorizedBadge, CommunicationDetailPanel, CycleProgressCard, DatePicker, DetailHeader, Dialog, FilterPanel, FormLabelGroup, GeoFieldMappingForm, GeoResolutionBadge, GeocodablePreview, Grid, InlineLabel, Input, LabelCell, MembershipAuditTimeline, MembershipPanel, MessageEventTimeline, MessageStatusBadge, OwnerBadge, OwnershipMeta, OwnershipSummary, PaginationBar, PaymentEventTimeline, PaymentTimeline, PreferenceEditor, PreferencePanel, PreferenceSummaryBadge, PreferenceTimeline, PriceBadge, PriceCardMeta, PriceSummary, RelativeTimestamp, RoleAssignmentForm, RoleBadgeList, SearchInput, Select, SortIndicator, Stack, StateTransitionEvent, StatusBadge, StatusColorLegend, StatusSelector, StatusTimeline, Switch, Table, TableBody, TableCaption, TableCell, TableHead, TableHeaderCell, TableRow, Tabs, TagInput, TagManager, TagPills, TagSummary, TemplatePicker, Text, Textarea, TimelineEntryLabel, VizAreaControls, VizAreaPreview, VizAxisControls, VizAxisSummary, VizColorControls, VizColorLegendConfig, VizEncodingBadge, VizGraphPreview, VizHeatmapControls, VizHeatmapPreview, VizLineControls, VizLinePreview, VizMarkControls, VizMarkPreview, VizOpacityControls, VizOpacitySummary, VizPointControls, VizPointPreview, VizRoleBadge, VizScaleControls, VizScaleSummary, VizScatterControls, VizScatterPreview, VizShapeControls, VizShapeLegend, VizSizeControls, VizSizeSummary };
+export { AddressCollectionPanel, AddressEditor, AddressSummaryBadge, AddressValidationTimeline, ArchiveEvent, ArchivePill, ArchiveSummary, ArchivedRowOverlay, AuditEvent, AuditSummaryCard, AuditTimeline, Badge, Banner, BillingAmountInput, BillingCardMeta, BillingIntervalSelector, BillingSummaryBadge, Button, CancellationBadge, CancellationEvent, CancellationForm, CancellationSummary, Card, CardHeader, Checkbox, ClassificationBadge, ClassificationEditor, ClassificationPanel, ColorStatePicker, ColorSwatch, ColorizedBadge, Combobox, CommunicationDetailPanel, CycleProgressCard, DatePicker, DetailHeader, Dialog, FilterPanel, FormLabelGroup, GeoFieldMappingForm, GeoResolutionBadge, GeocodablePreview, Grid, InlineLabel, Input, LabelCell, MembershipAuditTimeline, MembershipPanel, MessageEventTimeline, MessageStatusBadge, OwnerBadge, OwnershipMeta, OwnershipSummary, PaginationBar, PaymentEventTimeline, PaymentTimeline, PreferenceEditor, PreferencePanel, PreferenceSummaryBadge, PreferenceTimeline, PriceBadge, PriceCardMeta, PriceSummary, RelativeTimestamp, RoleAssignmentForm, RoleBadgeList, SearchInput, SegmentedControl, Select, SortIndicator, Stack, StateTransitionEvent, StatusBadge, StatusColorLegend, StatusSelector, StatusTimeline, Switch, Table, TableBody, TableCaption, TableCell, TableHead, TableHeaderCell, TableRow, Tabs, TagInput, TagManager, TagPills, TagSummary, TemplatePicker, Text, Textarea, TimelineEntryLabel, VizAreaControls, VizAreaPreview, VizAxisControls, VizAxisSummary, VizColorControls, VizColorLegendConfig, VizEncodingBadge, VizGraphPreview, VizHeatmapControls, VizHeatmapPreview, VizLineControls, VizLinePreview, VizMarkControls, VizMarkPreview, VizOpacityControls, VizOpacitySummary, VizPointControls, VizPointPreview, VizRoleBadge, VizScaleControls, VizScaleSummary, VizScatterControls, VizScatterPreview, VizShapeControls, VizShapeLegend, VizSizeControls, VizSizeSummary };

package/dist/ported.cjs

@@ -187,6 +187,31 @@ vue.defineComponent({
   }
 });
 var canShowModal = () => typeof HTMLDialogElement !== "undefined" && typeof HTMLDialogElement.prototype.showModal === "function";
+var pageLocks = 0;
+var pageStyle;
+function lockPageScroll() {
+  const page = document.documentElement;
+  if (pageLocks++ === 0) {
+    const scrollbar = window.innerWidth - page.clientWidth;
+    pageStyle = { overflow: page.style.overflow, paddingRight: page.style.paddingRight };
+    if (scrollbar > 0) page.style.paddingRight = `${parseFloat(getComputedStyle(page).paddingRight) + scrollbar}px`;
+    page.style.overflow = "hidden";
+  }
+  let held = true;
+  return () => {
+    if (!held) return;
+    held = false;
+    if (--pageLocks === 0 && pageStyle) {
+      page.style.overflow = pageStyle.overflow;
+      page.style.paddingRight = pageStyle.paddingRight;
+      pageStyle = void 0;
+    }
+  };
+}
+var outsideBox = (event, dialog) => {
+  const box = dialog.getBoundingClientRect();
+  return event.clientX < box.left || event.clientX > box.right || event.clientY < box.top || event.clientY > box.bottom;
+};
 vue.defineComponent({
   name: "OodsDialog",
   props: {
@@ -208,15 +233,24 @@ vue.defineComponent({
     const element = vue.ref(null);
     const mounted = vue.ref(false);
     const managed = vue.computed(() => props.modal && mounted.value && canShowModal());
+    let unlockScroll;
+    let pressedBackdrop = false;
+    const releaseScroll = () => {
+      unlockScroll?.();
+      unlockScroll = void 0;
+    };
     const sync = () => {
       const dialog = element.value;
       if (!dialog || !managed.value) return;
-      if (props.open && !dialog.open) dialog.showModal();
-      else if (!props.open && dialog.open) dialog.close();
+      if (props.open && !dialog.open) {
+        dialog.showModal();
+        unlockScroll ??= lockPageScroll();
+      } else if (!props.open && dialog.open) dialog.close();
     };
     vue.onMounted(() => {
       mounted.value = true;
     });
+    vue.onBeforeUnmount(releaseScroll);
     vue.watch([() => props.open, managed], sync, { flush: "post" });
     const requestClose = (event) => {
       event.preventDefault();
@@ -239,10 +273,23 @@ vue.defineComponent({
           if (event.key === "Escape" && !event.defaultPrevented) requestClose(event);
         },
         onCancel: requestClose,
-        // The browser closed it (a close request it would not let be cancelled) while open is still true. A close event
-        // from moving a mounted dialog into the top layer finds it open again, and is not reported.
+        // A close event from moving a mounted dialog into the top layer finds it open again, and is not reported. Any other
+        // close releases the page; when the browser closed it (a close request it would not let be cancelled) while open is
+        // still true, it is reported.
         onClose: () => {
-          if (props.open && !element.value?.open) emit("close");
+          if (element.value?.open) return;
+          releaseScroll();
+          if (props.open) emit("close");
+        },
+        onMousedown: (event) => {
+          pressedBackdrop = managed.value && event.target === event.currentTarget && outsideBox(event, event.currentTarget);
+        },
+        // s223-m02 (#2527 ruling 13b): a click on the backdrop emits close, as the close control does. A press that began
+        // inside the dialog (text selected and dragged out) is not a backdrop click.
+        onClick: (event) => {
+          const backdrop = pressedBackdrop && event.target === event.currentTarget && outsideBox(event, event.currentTarget);
+          pressedBackdrop = false;
+          if (backdrop) emit("close");
         }
       }, [
         vue.h("div", { class: "oods-dialog__header" }, [

package/dist/ported.js

@@ -1,5 +1,5 @@
 import { dateTimeInputValue, formatDateTime, formatReadOnlyValue, STATUS_ICON_SVG_ATTRS, STATUS_ICON_SHAPES, getStatusPresentation, resolveStatusIcon, currencyMinorUnits } from '@oods/component-contracts';
-import { defineComponent, h, useId, computed, ref, onMounted, watch, onBeforeUnmount } from 'vue';
+import { defineComponent, h, useId, computed, ref, onMounted, onBeforeUnmount, watch } from 'vue';
 
 // src/ported.ts
 function statusIcon(name) {
@@ -185,6 +185,31 @@ defineComponent({
   }
 });
 var canShowModal = () => typeof HTMLDialogElement !== "undefined" && typeof HTMLDialogElement.prototype.showModal === "function";
+var pageLocks = 0;
+var pageStyle;
+function lockPageScroll() {
+  const page = document.documentElement;
+  if (pageLocks++ === 0) {
+    const scrollbar = window.innerWidth - page.clientWidth;
+    pageStyle = { overflow: page.style.overflow, paddingRight: page.style.paddingRight };
+    if (scrollbar > 0) page.style.paddingRight = `${parseFloat(getComputedStyle(page).paddingRight) + scrollbar}px`;
+    page.style.overflow = "hidden";
+  }
+  let held = true;
+  return () => {
+    if (!held) return;
+    held = false;
+    if (--pageLocks === 0 && pageStyle) {
+      page.style.overflow = pageStyle.overflow;
+      page.style.paddingRight = pageStyle.paddingRight;
+      pageStyle = void 0;
+    }
+  };
+}
+var outsideBox = (event, dialog) => {
+  const box = dialog.getBoundingClientRect();
+  return event.clientX < box.left || event.clientX > box.right || event.clientY < box.top || event.clientY > box.bottom;
+};
 defineComponent({
   name: "OodsDialog",
   props: {
@@ -206,15 +231,24 @@ defineComponent({
     const element = ref(null);
     const mounted = ref(false);
     const managed = computed(() => props.modal && mounted.value && canShowModal());
+    let unlockScroll;
+    let pressedBackdrop = false;
+    const releaseScroll = () => {
+      unlockScroll?.();
+      unlockScroll = void 0;
+    };
     const sync = () => {
       const dialog = element.value;
       if (!dialog || !managed.value) return;
-      if (props.open && !dialog.open) dialog.showModal();
-      else if (!props.open && dialog.open) dialog.close();
+      if (props.open && !dialog.open) {
+        dialog.showModal();
+        unlockScroll ??= lockPageScroll();
+      } else if (!props.open && dialog.open) dialog.close();
     };
     onMounted(() => {
       mounted.value = true;
     });
+    onBeforeUnmount(releaseScroll);
     watch([() => props.open, managed], sync, { flush: "post" });
     const requestClose = (event) => {
       event.preventDefault();
@@ -237,10 +271,23 @@ defineComponent({
           if (event.key === "Escape" && !event.defaultPrevented) requestClose(event);
         },
         onCancel: requestClose,
-        // The browser closed it (a close request it would not let be cancelled) while open is still true. A close event
-        // from moving a mounted dialog into the top layer finds it open again, and is not reported.
+        // A close event from moving a mounted dialog into the top layer finds it open again, and is not reported. Any other
+        // close releases the page; when the browser closed it (a close request it would not let be cancelled) while open is
+        // still true, it is reported.
         onClose: () => {
-          if (props.open && !element.value?.open) emit("close");
+          if (element.value?.open) return;
+          releaseScroll();
+          if (props.open) emit("close");
+        },
+        onMousedown: (event) => {
+          pressedBackdrop = managed.value && event.target === event.currentTarget && outsideBox(event, event.currentTarget);
+        },
+        // s223-m02 (#2527 ruling 13b): a click on the backdrop emits close, as the close control does. A press that began
+        // inside the dialog (text selected and dragged out) is not a backdrop click.
+        onClick: (event) => {
+          const backdrop = pressedBackdrop && event.target === event.currentTarget && outsideBox(event, event.currentTarget);
+          pressedBackdrop = false;
+          if (backdrop) emit("close");
         }
       }, [
         h("div", { class: "oods-dialog__header" }, [