@q1travel/design-system 0.14.1 → 0.15.0

package/contracts/overlay-foundation.md

@@ -156,7 +156,7 @@ type OverlayRecord = {
 | --- | --- | --- | --- |
 | Modal | 公开 props、尺寸/布局、关闭策略、文档示例 | portal、stack、focus、blocking lock、统一 Escape/outside ownership | Foundation |
 | DestructiveActionModal | destructive/loading/confirm 语义与提交状态 | 同上；loading 时由 policy 禁止关闭 | Foundation |
-| Sheet | 现有 side、persistent-context 语义；blocking=true、outside pointer=false | 同上；不能让 CSS 注释与 ARIA 语义继续冲突 | Foundation |
+| Sheet | side、persistent-context 语义；blocking=true、outside pointer=false；dismissable 默认 true，false 禁用 Escape 并隐藏内置关闭按钮 | 同上；不能让 CSS 注释与 ARIA 语义继续冲突 | Foundation |
 | Drawer | mobile bottom、gesture、outside/Escape 语义 | 同上；gesture 关闭仍必须服从 top-most 与 loading policy | Foundation |
 
 组件接入不得一次性重写四个组件，也不得在未有单独 contract 的情况下改变公开 DOM、默认 dismissal 或 accessibility tier。
@@ -259,3 +259,7 @@ D7  q1travel-web adoption/migration
 - 宿主每次 open 对应一次登记/释放；改变 blocking 策略应重新登记。idempotent disposer 支持 StrictMode 清理。不同 document 完全隔离。
 
 回归入口：`node --test scripts/check-overlay-coordination.test.mjs`；真实跨 root 的 Escape、焦点、快捷键与滚动锁由 Web consumer 浏览器测试验证。
+
+### Sheet sizing and dismissal
+
+Sheet accepts optional `size: 'sm' | 'md' | 'lg' | 'xl'` for left/right panel widths of 360/480/640/860px, capped by the existing viewport gutters. Omitting size retains 512px. Top/bottom geometry, `title: string`, children, footer, and side remain unchanged. Dismissal policy updates take effect in the same commit as visible close controls, before consumer layout effects. `dismissable=false` retains its blocking coordinator entry, focus trap, inert background, and scroll lock; Escape cannot dismiss it or the underlying host overlay. Outside pointer never closes Sheet. Consumers retain ownership of controlled open and footer actions and restore dismissal when the temporary busy state ends.

package/dist-pkg/design-system.d.ts

@@ -1392,17 +1392,21 @@ export declare function Separator({ orientation, decorative, className, }: {
 
 export declare type SeparatorOrientation = 'horizontal' | 'vertical';
 
-export declare function Sheet({ open, onClose, title, side, children, footer }: {
+export declare function Sheet({ open, onClose, title, side, size, dismissable, children, footer }: {
     open: boolean;
     onClose: () => void;
     title: string;
     side?: SheetSide;
+    size?: SheetSize;
+    dismissable?: boolean;
     children: ReactNode;
     footer?: ReactNode;
 }): ReactNode;
 
 export declare type SheetSide = 'top' | 'right' | 'bottom' | 'left';
 
+export declare type SheetSize = 'sm' | 'md' | 'lg' | 'xl';
+
 export declare function ShowMore({ items, initial, noBorder, initialExpanded, }: {
     items: string[];
     initial?: number;

package/dist-pkg/design-system.js

@@ -1,6 +1,6 @@
 import { jsxs as l, jsx as t, Fragment as ae } from "react/jsx-runtime";
-import { forwardRef as Kt, createElement as lt, useState as H, useRef as A, useEffect as G, useCallback as se, useLayoutEffect as ce, useMemo as oe, useContext as ft, createContext as mt, useId as te, useReducer as wn, Fragment as He, isValidElement as wt, cloneElement as Nn, useImperativeHandle as vn } from "react";
-import { createPortal as pt } from "react-dom";
+import { forwardRef as Kt, createElement as ct, useState as H, useRef as A, useEffect as G, useCallback as se, useLayoutEffect as ce, useMemo as oe, useContext as mt, createContext as pt, useId as te, useReducer as wn, Fragment as He, isValidElement as Nt, cloneElement as Nn, useImperativeHandle as vn } from "react";
+import { createPortal as bt } from "react-dom";
 const kn = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), Ot = (...e) => e.filter((n, r, a) => !!n && n.trim() !== "" && a.indexOf(n) === r).join(" ").trim();
 var xn = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -23,7 +23,7 @@ const Cn = Kt(
     children: o,
     iconNode: s,
     ...c
-  }, d) => lt(
+  }, d) => ct(
     "svg",
     {
       ref: d,
@@ -36,14 +36,14 @@ const Cn = Kt(
       ...c
     },
     [
-      ...s.map(([b, u]) => lt(b, u)),
+      ...s.map(([b, u]) => ct(b, u)),
       ...Array.isArray(o) ? o : [o]
     ]
   )
 );
 const J = (e, n) => {
   const r = Kt(
-    ({ className: a, ...i }, o) => lt(Cn, {
+    ({ className: a, ...i }, o) => ct(Cn, {
       ref: o,
       iconNode: n,
       className: Ot(`lucide-${kn(e)}`, a),
@@ -77,7 +77,7 @@ const me = J("ChevronRight", [
   ["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]
 ]);
 const Ht = J("ChevronUp", [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]]);
-const bt = J("CircleAlert", [
+const _t = J("CircleAlert", [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
@@ -137,7 +137,7 @@ const $n = J("Eye", [
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
 ]);
-const Nt = J("FileCode", [
+const vt = J("FileCode", [
   ["path", { d: "M10 12.5 8 15l2 2.5", key: "1tg20x" }],
   ["path", { d: "m14 12.5 2 2.5-2 2.5", key: "yinavb" }],
   ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }],
@@ -255,12 +255,12 @@ const je = J("TriangleAlert", [
 const _e = J("X", [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-]), vt = /* @__PURE__ */ new WeakMap();
+]), kt = /* @__PURE__ */ new WeakMap();
 function ke() {
   return typeof document > "u" ? null : document;
 }
 function de(e) {
-  const n = vt.get(e);
+  const n = kt.get(e);
   if (n) return n;
   const r = {
     root: null,
@@ -277,7 +277,7 @@ function de(e) {
     observer: null,
     coordinator: null
   };
-  return vt.set(e, r), r;
+  return kt.set(e, r), r;
 }
 function Vn(e) {
   for (const n of e.listeners)
@@ -341,13 +341,13 @@ function Qn(e) {
     }), a.style.position = "relative", a.style.isolation = "isolate", a.style.zIndex = `calc(var(--q1-z-overlay-root, 1300) + ${i})`;
   });
 }
-function _t(e, n) {
+function yt(e, n) {
   const r = Gt(n);
   for (const a of Array.from(e.body?.children ?? [])) {
     let i = n.inertSnapshot.find((o) => o.element === a);
     i || (i = { element: a, inert: a.inert }, n.inertSnapshot.push(i)), a.inert = r.includes(a) ? i.inert : !0;
   }
-  n.backgroundInert = !0, !n.observer && e.defaultView?.MutationObserver && (n.observer = new e.defaultView.MutationObserver(() => _t(e, n)), n.observer.observe(e.body, { childList: !0 }));
+  n.backgroundInert = !0, !n.observer && e.defaultView?.MutationObserver && (n.observer = new e.defaultView.MutationObserver(() => yt(e, n)), n.observer.observe(e.body, { childList: !0 }));
 }
 function Yt(e) {
   e.observer?.disconnect(), e.observer = null;
@@ -355,31 +355,31 @@ function Yt(e) {
     n.element.inert = n.inert;
   e.inertSnapshot = [], e.backgroundInert = !1;
 }
-function ct(e, n) {
+function dt(e, n) {
   const r = n.entries.filter((a) => a.blocking).length;
-  n.blockingCount = r, Qn(n), r > 0 ? (n.scrollLocked || Xn(e, n), _t(e, n)) : r === 0 && n.scrollLocked && (Zn(e, n), Yt(n)), Vn(n);
+  n.blockingCount = r, Qn(n), r > 0 ? (n.scrollLocked || Xn(e, n), yt(e, n)) : r === 0 && n.scrollLocked && (Zn(e, n), Yt(n)), Vn(n);
 }
 function Xt(e, n) {
   const r = de(e);
   if (r.entries.some((i) => i.id === n.id)) throw new Error(`Duplicate overlay id: ${n.id}`);
-  r.entries.push(n), ct(e, r);
+  r.entries.push(n), dt(e, r);
   let a = !0;
   return () => {
     if (!a) return;
     a = !1;
     const i = r.entries.indexOf(n);
-    i >= 0 && r.entries.splice(i, 1), ct(e, r);
+    i >= 0 && r.entries.splice(i, 1), dt(e, r);
   };
 }
 function Qe(e, n, r = "programmatic") {
   const a = de(e), i = n.blocking && a.blockingCount === 1 && a.backgroundInert;
   i && Yt(a), n.onClose(r), i && window.setTimeout(() => {
-    a.entries.includes(n) && a.blockingCount > 0 && !a.backgroundInert && _t(e, a);
+    a.entries.includes(n) && a.blockingCount > 0 && !a.backgroundInert && yt(e, a);
   }, 0);
 }
 function Jn(e, n, r) {
   const a = de(e), i = a.entries.find((o) => o.id === n);
-  i && (Object.assign(i, r), ct(e, a));
+  i && (Object.assign(i, r), dt(e, a));
 }
 function Ce(e, n) {
   return de(e).entries.at(-1)?.id === n;
@@ -440,9 +440,9 @@ const nr = {
   success: Vt,
   warning: je,
   error: jt
-}, kt = 3, xt = 12, rr = 14, ar = 45, ir = 0.11, Jt = mt(null);
+}, xt = 3, Ct = 12, rr = 14, ar = 45, ir = 0.11, Jt = pt(null);
 function or() {
-  const e = ft(Jt);
+  const e = mt(Jt);
   if (!e)
     throw new Error("useToast 必须在 ToastProvider 内使用");
   return e;
@@ -517,10 +517,10 @@ function Fa({ children: e }) {
     let C = 0, g = 0;
     for (let E = w.length - 1; E >= 0; E -= 1) {
       const v = w[E], p = w.length - 1 - E, k = lr(v);
-      p === 0 && (g = k), v.style.setProperty("--depth", String(p)), v.style.setProperty("--h", `${k}px`), v.style.setProperty("--y", `${-C}px`), v.style.zIndex = String(100 + E), v.dataset.front = String(p === 0), v.dataset.visible = String(p < kt), C += k + xt;
+      p === 0 && (g = k), v.style.setProperty("--depth", String(p)), v.style.setProperty("--h", `${k}px`), v.style.setProperty("--y", `${-C}px`), v.style.zIndex = String(100 + E), v.dataset.front = String(p === 0), v.dataset.visible = String(p < xt), C += k + Ct;
     }
     h.style.setProperty("--front-h", `${g}px`);
-    const R = g + Math.min(w.length - 1, kt - 1) * rr, y = w.length === 0 ? 0 : b ? Math.max(C - xt, 0) : R;
+    const R = g + Math.min(w.length - 1, xt - 1) * rr, y = w.length === 0 ? 0 : b ? Math.max(C - Ct, 0) : R;
     h.style.setProperty("--toast-stack-h", `${y}px`);
   }, [n, b]), G(() => {
     n.filter((h) => !h.removed).length <= 1 && u(!1);
@@ -722,7 +722,7 @@ function tn({
     b
   );
 }
-function Ct(e) {
+function qt(e) {
   return e == null || e === "" || typeof e == "boolean" ? null : /* @__PURE__ */ t("span", { className: "button__affix", "aria-hidden": "true", children: e });
 }
 function hr({ busy: e, busyLabel: n, children: r }) {
@@ -745,9 +745,9 @@ function nn({
     r || e ? r ? /* @__PURE__ */ t("span", { className: "button__spinner-slot", "aria-hidden": "true", children: /* @__PURE__ */ t(ve, { className: "button__spinner", size: 14, strokeWidth: 1.8, "aria-hidden": "true" }) }) : /* @__PURE__ */ l("span", { role: "status", children: [
       /* @__PURE__ */ t(ve, { className: "button__spinner", size: 14, strokeWidth: 1.8, "aria-hidden": "true" }),
       /* @__PURE__ */ t("span", { className: "q1-sr-only", children: n || "加载中…" })
-    ] }) : Ct(i),
+    ] }) : qt(i),
     hr({ busy: r, busyLabel: a, children: o }),
-    Ct(s),
+    qt(s),
     c ? /* @__PURE__ */ t("kbd", { className: "button__shortcut", "aria-hidden": "true", children: c }) : null
   ] });
 }
@@ -935,7 +935,7 @@ function mr({ "aria-label": e, ariaLabel: n, ...r }) {
   const a = e ?? n;
   return a?.trim() || console.warn("IconButton: 缺少 aria-label，纯图标按钮必须提供可访问名称。"), /* @__PURE__ */ t(an, { ...r, svgOnly: !0, "aria-label": a });
 }
-const on = mt(!1);
+const on = pt(!1);
 function Ne(e, n) {
   return `${e}-${n ? "message" : "description"}`;
 }
@@ -947,7 +947,7 @@ function Ge({
   wide: i,
   children: o
 }) {
-  const s = ft(on), c = U("form-field", i ? "form-field--wide" : "", a ? "form-field--error" : ""), d = Ne(e, !!a);
+  const s = mt(on), c = U("form-field", i ? "form-field--wide" : "", a ? "form-field--error" : ""), d = Ne(e, !!a);
   return /* @__PURE__ */ l("div", { className: c, children: [
     /* @__PURE__ */ t("label", { className: "form-field__label", htmlFor: e, children: n }),
     o,
@@ -957,7 +957,7 @@ function Ge({
     ] }) : a ? /* @__PURE__ */ t("span", { className: "form-field__message", id: d, children: a }) : r ? /* @__PURE__ */ t("span", { className: "form-field__description", id: d, children: r }) : null
   ] });
 }
-function yt(...e) {
+function gt(...e) {
   return e.filter(Boolean).join(" ") || void 0;
 }
 function Ye(...e) {
@@ -977,7 +977,7 @@ function Ye(...e) {
     };
   };
 }
-function gt(e, n, r) {
+function wt(e, n, r) {
   G(() => {
   }, [n, e, r]);
 }
@@ -1018,14 +1018,14 @@ function pr({
       children: T ? /* @__PURE__ */ t(Dn, { "aria-hidden": "true", size: 16, strokeWidth: 1.8 }) : /* @__PURE__ */ t($n, { "aria-hidden": "true", size: 16, strokeWidth: 1.8 })
     }
   ) : null;
-  gt("Input", v, p);
+  wt("Input", v, p);
   const W = r || a ? Ne(E, !!a) : void 0, O = U("form-control", m !== "md" ? `form-control--${m}` : "", N ?? ""), K = U("input-control", f ? "input-control--rounded" : ""), $ = /* @__PURE__ */ t(
     "input",
     {
       ref: k,
       id: E,
       className: O,
-      "aria-describedby": yt(o, W),
+      "aria-describedby": gt(o, W),
       "aria-invalid": i || a ? !0 : void 0,
       ...R,
       ...x ? { type: T ? "text" : "password" } : null
@@ -1125,7 +1125,7 @@ function Ha({
           readOnly: o,
           required: s,
           invalid: c || !!m || !!k,
-          errorId: yt(d, h, F, f === void 0 && k ? K : void 0),
+          errorId: gt(d, h, F, f === void 0 && k ? K : void 0),
           "aria-label": N,
           "aria-labelledby": x,
           onFocus: (P) => B(P.currentTarget),
@@ -1289,7 +1289,7 @@ function Ua({
   ..._
 }) {
   const m = te(), N = e ?? m, x = n === void 0, h = A(null), w = oe(() => Ye(h, s), [s]);
-  gt("Textarea", x, h);
+  wt("Textarea", x, h);
   const [C, g] = H(
     () => typeof _.defaultValue == "string" ? _.defaultValue.length : 0
   ), R = typeof _.value == "string" ? _.value.length : C, y = u !== void 0, E = !x && (r || a) ? Ne(N, !!a) : void 0, v = U(
@@ -1304,7 +1304,7 @@ function Ua({
       ref: w,
       className: v,
       maxLength: u,
-      "aria-describedby": yt(o, E),
+      "aria-describedby": gt(o, E),
       "aria-invalid": i || a ? !0 : void 0,
       onInput: y ? (M) => {
         g(M.currentTarget.value.length), f?.(M);
@@ -1372,7 +1372,7 @@ function ln({
   ...c
 }) {
   const d = te(), b = e ?? d, u = n === void 0, f = s === "radio", _ = !f && (r || a) ? Ne(b, !!a) : void 0, m = f ? "control-option__visual control-option__visual--radio" : "control-option__visual", N = A(null), x = oe(() => Ye(N, o), [o]);
-  gt(f ? "Radio" : "Checkbox", u, N), G(() => {
+  wt(f ? "Radio" : "Checkbox", u, N), G(() => {
     N.current && (N.current.indeterminate = !f && !!i);
   }, [i, f]);
   const h = /* @__PURE__ */ t(
@@ -1773,7 +1773,7 @@ function ai(e) {
         },
         _.label
       )) }) : b ? /* @__PURE__ */ l("span", { className: "codeblock__filename", children: [
-        /* @__PURE__ */ t(Nt, { size: 14, strokeWidth: 2, "aria-hidden": "true" }),
+        /* @__PURE__ */ t(vt, { size: 14, strokeWidth: 2, "aria-hidden": "true" }),
         b
       ] }) : /* @__PURE__ */ t("span", {}),
       /* @__PURE__ */ t(
@@ -1788,7 +1788,7 @@ function ai(e) {
       )
     ] }),
     c?.filename ? /* @__PURE__ */ l("div", { className: "codeblock__tabfile", children: [
-      /* @__PURE__ */ t(Nt, { size: 14, strokeWidth: 2, "aria-hidden": "true" }),
+      /* @__PURE__ */ t(vt, { size: 14, strokeWidth: 2, "aria-hidden": "true" }),
       c.filename
     ] }) : null,
     /* @__PURE__ */ t("pre", { className: "codeblock__pre", children: /* @__PURE__ */ t("code", { children: d.map((_, m) => {
@@ -1891,7 +1891,7 @@ function ii({
     ) : null
   ] });
 }
-const dn = mt(null);
+const dn = pt(null);
 function oi({ multiple: e, children: n }) {
   const [r, a] = H(null);
   return /* @__PURE__ */ t("div", { className: "collapse-group", children: /* @__PURE__ */ t(dn.Provider, { value: e ? null : { openId: r, setOpenId: a }, children: n }) });
@@ -1902,7 +1902,7 @@ function si({
   small: r,
   children: a
 }) {
-  const i = ft(dn), o = te(), [s, c] = H(n ?? !1);
+  const i = mt(dn), o = te(), [s, c] = H(n ?? !1);
   ce(() => {
     i && n && i.setOpenId(o);
   }, []);
@@ -2040,10 +2040,10 @@ function li({ sections: e, triggerLabel: n = "打开命令面板", hotkey: r })
     ] }) : null
   ] });
 }
-function qt(e, n) {
+function Et(e, n) {
   return `${e}:${n}`;
 }
-function Et(e, n, r) {
+function It(e, n, r) {
   return `${e}-option-${n}-${r}`;
 }
 function ci({
@@ -2062,7 +2062,7 @@ function ci({
   const f = te(), _ = `${f}-dialog`, m = `${f}-listbox`, N = A(null), x = A(null), h = A(null), w = A(null), C = A(null), g = oe(
     () => i.flatMap(
       (I, W) => I.items.flatMap(
-        (O, K) => O.disabled ? [] : [{ key: qt(W, K), optionId: Et(f, W, K), item: O }]
+        (O, K) => O.disabled ? [] : [{ key: Et(W, K), optionId: It(f, W, K), item: O }]
       )
     ),
     [f, i]
@@ -2197,13 +2197,13 @@ function ci({
                       children: [
                         I.heading ? /* @__PURE__ */ t("div", { className: "search-dialog__heading", id: O, children: I.heading }) : null,
                         I.items.map((K, $) => {
-                          const F = qt(W, $), B = v?.key === F;
+                          const F = Et(W, $), B = v?.key === F;
                           return /* @__PURE__ */ l(
                             "button",
                             {
                               type: "button",
                               className: `search-dialog__option${B ? " search-dialog__option--active" : ""}${K.disabled ? " search-dialog__option--disabled" : ""}`,
-                              id: Et(f, W, $),
+                              id: It(f, W, $),
                               role: "option",
                               "aria-selected": B,
                               "aria-disabled": K.disabled || void 0,
@@ -2255,7 +2255,7 @@ const yr = [
   "textarea:not([disabled])",
   '[contenteditable="true"]',
   '[tabindex]:not([tabindex="-1"])'
-].join(","), et = /* @__PURE__ */ new WeakMap(), It = typeof document > "u" ? G : ce;
+].join(","), et = /* @__PURE__ */ new WeakMap(), tt = typeof document > "u" ? G : ce;
 function un(e) {
   return e ? Array.from(e.querySelectorAll(yr)).filter(
     (n) => (!n.hasAttribute("tabindex") || n.tabIndex >= 0) && Xe(n)
@@ -2292,7 +2292,7 @@ function St(e, n, r) {
   const o = i[0], s = i.at(-1);
   !a?.contains(n.activeElement) || n.activeElement === a ? (e.preventDefault(), (e.shiftKey ? s : o).focus()) : e.shiftKey && n.activeElement === o ? (e.preventDefault(), s.focus()) : !e.shiftKey && n.activeElement === s && (e.preventDefault(), o.focus());
 }
-function tt(e, n) {
+function nt(e, n) {
   if (!e) return;
   const r = n?.current;
   (r && e.contains(r) && Xe(r) ? r : un(e)[0] ?? e).focus();
@@ -2369,23 +2369,23 @@ function De({
       y.current = null, h(null);
     };
   }, [o, e, i, p]);
-  It(() => {
+  tt(() => {
     if (d === "layout")
       return k();
   }, [k, d]), G(() => {
     if (d === "deferred")
       return k();
-  }, [k, d]), G(() => {
+  }, [k, d]), tt(() => {
     !e || typeof document > "u" || !E.current || Jn(document, E.current.id, {
       blocking: n,
       escape: _ ? !_.busy : r,
       outsidePointer: a
     });
-  }, [n, r, _, e, a]), It(() => {
-    !e || !b || c !== "layout" || tt(o.current, s);
+  }, [n, r, _, e, a]), tt(() => {
+    !e || !b || c !== "layout" || nt(o.current, s);
   }, [o, b, s, c, e, x]), G(() => {
     if (!e || !b || c !== "deferred") return;
-    const I = window.setTimeout(() => tt(o.current, s), 0);
+    const I = window.setTimeout(() => nt(o.current, s), 0);
     return () => window.clearTimeout(I);
   }, [o, b, s, c, e, x]);
   const M = se((I) => {
@@ -2409,9 +2409,9 @@ function De({
     const I = E.current;
     if (!I || !Ce(document, I.id)) return !1;
     const W = I.getContainer();
-    return W?.isConnected ? (tt(W, s), W.contains(document.activeElement)) : !1;
+    return W?.isConnected ? (nt(W, s), W.contains(document.activeElement)) : !1;
   }, [s]), z = se(
-    (I) => x ? pt(I, x) : u ? null : I,
+    (I) => x ? bt(I, x) : u ? null : I,
     [u, x]
   );
   return { focusInitialIfTopMost: T, onKeyDown: M, portal: z, portalRoot: x, requestClose: S };
@@ -2647,7 +2647,7 @@ function mi({
   children: a
 }) {
   return /* @__PURE__ */ l("div", { className: `error-msg error-msg--${n}`, role: "alert", "aria-live": "assertive", children: [
-    /* @__PURE__ */ t(bt, { className: "error-msg__icon", size: 16, strokeWidth: 2, "aria-hidden": "true" }),
+    /* @__PURE__ */ t(_t, { className: "error-msg__icon", size: 16, strokeWidth: 2, "aria-hidden": "true" }),
     /* @__PURE__ */ l("span", { className: "error-msg__text", children: [
       /* @__PURE__ */ t("span", { className: "q1-sr-only", children: "错误：" }),
       e ? /* @__PURE__ */ t("strong", { className: "error-msg__label", children: e }) : null,
@@ -2658,7 +2658,7 @@ function mi({
 }
 function pi({ title: e, message: n, action: r }) {
   return /* @__PURE__ */ l("div", { className: "error-card", role: "alert", "aria-live": "assertive", children: [
-    /* @__PURE__ */ t(bt, { className: "error-card__icon", size: 20, strokeWidth: 2, "aria-hidden": "true" }),
+    /* @__PURE__ */ t(_t, { className: "error-card__icon", size: 20, strokeWidth: 2, "aria-hidden": "true" }),
     /* @__PURE__ */ l("p", { className: "error-card__title", children: [
       /* @__PURE__ */ t("span", { className: "q1-sr-only", children: "错误：" }),
       e
@@ -3495,18 +3495,18 @@ const fn = {
   attemptedScopeId: null,
   restoreFocusId: null
 };
-function nt() {
+function rt() {
   return { ...fn };
 }
 function Dr(e, n) {
   switch (n.type) {
     case "open":
     case "close":
-      return nt();
+      return rt();
     case "openScope":
       return { ...e, view: "scope", query: "", activeId: null, restoreFocusId: null };
     case "selectCurrentScope":
-      return nt();
+      return rt();
     case "attemptScope":
       return {
         ...e,
@@ -3523,7 +3523,7 @@ function Dr(e, n) {
       return { ...e, restoreFocusId: null };
     case "reconcileScope": {
       const r = e.attemptedScopeId;
-      return r !== null && n.previousPendingId === r && !n.pendingId ? !n.hasError && n.selectedId === r ? nt() : {
+      return r !== null && n.previousPendingId === r && !n.pendingId ? !n.hasError && n.selectedId === r ? rt() : {
         ...e,
         view: "scope",
         activeId: r,
@@ -3533,7 +3533,7 @@ function Dr(e, n) {
     }
   }
 }
-const rt = typeof document > "u" ? G : ce, $r = 500;
+const at = typeof document > "u" ? G : ce, $r = 500;
 function We(e) {
   return e.trim().toLocaleLowerCase();
 }
@@ -3598,16 +3598,16 @@ function Lr({
       selectedId: a.selectedId,
       hasError: !!o
     }), M.current = i;
-  }, [o, i, a.selectedId, g.attemptedScopeId]), rt(() => {
+  }, [o, i, a.selectedId, g.attemptedScopeId]), at(() => {
     if (!g.restoreFocusId) return;
     const q = E.current[g.restoreFocusId];
     q ? q.focus() : g.view === "scope" && p.current ? p.current.focus() : k.current?.focus(), R({ type: "restoreFocusHandled" });
-  }, [g.restoreFocusId]), rt(() => {
+  }, [g.restoreFocusId]), at(() => {
     if (!f || S.current) return;
     S.current = !0;
     const q = F.find((L) => L.id === B) ?? F[0];
     q ? E.current[q.id]?.focus() : P ? v.current?.focus() : k.current?.focus();
-  }, [P, F, f, B]), rt(() => {
+  }, [P, F, f, B]), at(() => {
     T.current !== g.view && (T.current = g.view, g.view === "scope" ? p.current?.focus() : v.current?.focus());
   }, [g.view]);
   function D(q) {
@@ -4194,17 +4194,17 @@ function Kr({
   );
 }
 const be = 8, Dt = 4, $t = typeof document > "u" ? G : ce;
-let ge = null, Ke = 0, dt = !1;
+let ge = null, Ke = 0, ut = !1;
 function Or() {
   if (typeof document > "u") return null;
   if (!ge || ge.parentElement !== document.body) {
     const e = document.body.querySelector(':scope > [data-q1-portal="context-switcher"]');
-    ge = e ?? document.createElement("div"), dt = !e, e || (ge.setAttribute("data-q1-portal", "context-switcher"), document.body.append(ge));
+    ge = e ?? document.createElement("div"), ut = !e, e || (ge.setAttribute("data-q1-portal", "context-switcher"), document.body.append(ge));
   }
   return Ke += 1, ge;
 }
 function Br() {
-  Ke = Math.max(0, Ke - 1), !(Ke > 0) && (dt && ge?.remove(), ge = null, dt = !1);
+  Ke = Math.max(0, Ke - 1), !(Ke > 0) && (ut && ge?.remove(), ge = null, ut = !1);
 }
 function Hr({
   controlled: e,
@@ -4513,7 +4513,7 @@ function Ti({
       onClose: ee,
       onOverlayKeyDown: P.onKeyDown
     }
-  ), Ie = w ? z ? D.portalRoot ? pt(xe, D.portalRoot) : null : P.portal(xe) : null;
+  ), Ie = w ? z ? D.portalRoot ? bt(xe, D.portalRoot) : null : P.portal(xe) : null;
   return /* @__PURE__ */ l(
     "div",
     {
@@ -4607,10 +4607,10 @@ function Yr({
   function E(p) {
     p.key === "Escape" && g();
   }
-  i && (!wt(i) || i.type === He) && console.warn(
+  i && (!Nt(i) || i.type === He) && console.warn(
     `Tooltip：children 必须是单个合法元素/组件（不能是纯文本、Fragment 或多个子节点），已回退为默认触发器${a ? `（文案："${a}"）` : "——但没有传 triggerLabel，会渲染成一个看不出用途的空文案按钮"}。`
   );
-  const v = i && wt(i) && i.type !== He ? Nn(i, {
+  const v = i && Nt(i) && i.type !== He ? Nn(i, {
     "aria-describedby": x,
     onFocus: (p) => {
       i.props.onFocus?.(p), C();
@@ -4635,7 +4635,7 @@ function Yr({
   );
   return /* @__PURE__ */ l("span", { ref: m, className: "q1-tooltip", onMouseEnter: C, onMouseLeave: g, children: [
     v,
-    h ? pt(
+    h ? bt(
       /* @__PURE__ */ t("span", { ref: N, role: "tooltip", id: x, className: y, style: R, children: e }),
       h
     ) : null
@@ -4943,7 +4943,7 @@ const ra = {
   default: Ve,
   success: On,
   warning: je,
-  error: bt
+  error: _t
 };
 function Hi({ variant: e = "default", message: n, cta: r }) {
   const a = ra[e];
@@ -5630,12 +5630,12 @@ function _n({ value: e, depth: n, path: r, collapsedDepth: a, highlight: i, seen
     /* @__PURE__ */ t("span", { className: "q1-json-view__punct q1-json-view__closer", children: _ })
   ] });
 }
-function ut(e, n) {
+function ht(e, n) {
   if (typeof e == "string") return `"${e}"`;
   if (e === null || typeof e != "object") return String(e);
   if (n.has(e)) return "<循环引用>";
   const r = new Set(n).add(e);
-  return Array.isArray(e) ? `[${e.map((i) => ut(i, r)).join(", ")}]` : `{${Object.entries(e).map(([i, o]) => `"${i}": ${ut(o, r)}`).join(", ")}}`;
+  return Array.isArray(e) ? `[${e.map((i) => ht(i, r)).join(", ")}]` : `{${Object.entries(e).map(([i, o]) => `"${i}": ${ht(o, r)}`).join(", ")}}`;
 }
 function no({
   value: e,
@@ -5654,7 +5654,7 @@ function no({
     n && "q1-json-view--single-line",
     c
   );
-  return /* @__PURE__ */ t("div", { className: b, role: "group", "aria-label": s, children: n ? /* @__PURE__ */ t("span", { className: "q1-json-view__single", children: ut(e, /* @__PURE__ */ new Set()) }) : /* @__PURE__ */ t(
+  return /* @__PURE__ */ t("div", { className: b, role: "group", "aria-label": s, children: n ? /* @__PURE__ */ t("span", { className: "q1-json-view__single", children: ht(e, /* @__PURE__ */ new Set()) }) : /* @__PURE__ */ t(
     _n,
     {
       value: e,
@@ -5732,12 +5732,12 @@ function ao({
     o
   ] });
 }
-const gn = "q1travel-design-system-theme", at = "q1travel-theme-change";
+const gn = "q1travel-design-system-theme", it = "q1travel-theme-change";
 function Ft() {
   const e = window.localStorage.getItem(gn);
   return e === "light" || e === "dark" || e === "system" ? e : "system";
 }
-function it(e) {
+function ot(e) {
   const n = document.documentElement, r = e === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : e;
   n.dataset.themeMode = e, n.dataset.theme = r;
   const a = document.querySelector("#q1-theme-color"), i = r === "dark" ? a?.dataset.dark : a?.dataset.light;
@@ -5746,13 +5746,13 @@ function it(e) {
 function va() {
   const [e, n] = H(Ft);
   return G(() => {
-    it(e);
-    const a = window.matchMedia("(prefers-color-scheme: dark)"), i = () => e === "system" && it("system"), o = () => n(Ft());
-    return a.addEventListener("change", i), window.addEventListener(at, o), window.addEventListener("storage", o), () => {
-      a.removeEventListener("change", i), window.removeEventListener(at, o), window.removeEventListener("storage", o);
+    ot(e);
+    const a = window.matchMedia("(prefers-color-scheme: dark)"), i = () => e === "system" && ot("system"), o = () => n(Ft());
+    return a.addEventListener("change", i), window.addEventListener(it, o), window.addEventListener("storage", o), () => {
+      a.removeEventListener("change", i), window.removeEventListener(it, o), window.removeEventListener("storage", o);
     };
   }, [e]), [e, (a) => {
-    window.localStorage.setItem(gn, a), it(a), n(a), window.dispatchEvent(new Event(at));
+    window.localStorage.setItem(gn, a), ot(a), n(a), window.dispatchEvent(new Event(it));
   }];
 }
 const ka = [
@@ -5981,35 +5981,35 @@ function ho({ items: e, label: n }) {
     /* @__PURE__ */ t("li", { className: "breadcrumb__item", children: /* @__PURE__ */ t(Oe, { crumb: o }) })
   ] }) });
 }
-function fo({ open: e, onClose: n, title: r, side: a = "right", children: i, footer: o }) {
-  const s = A(null), c = te(), { onKeyDown: d, portal: b } = De({
+function fo({ open: e, onClose: n, title: r, side: a = "right", size: i, dismissable: o = !0, children: s, footer: c }) {
+  const d = A(null), b = te(), { onKeyDown: u, portal: f } = De({
     open: e,
     blocking: !0,
-    dismissable: !0,
+    dismissable: o,
     outsidePointer: !1,
-    containerRef: s,
+    containerRef: d,
     onClose: n
   });
-  return e ? b(
+  return e ? f(
     /* @__PURE__ */ l(ae, { children: [
-      /* @__PURE__ */ t("div", { className: "sheet__backdrop", "aria-hidden": "true", onMouseDown: (u) => u.preventDefault() }),
+      /* @__PURE__ */ t("div", { className: "sheet__backdrop", "aria-hidden": "true", onMouseDown: (_) => _.preventDefault() }),
       /* @__PURE__ */ l(
         "div",
         {
-          ref: s,
+          ref: d,
           role: "dialog",
           "aria-modal": "true",
-          "aria-labelledby": c,
-          className: `sheet__panel sheet__panel--${a}`,
+          "aria-labelledby": b,
+          className: `sheet__panel sheet__panel--${a}${i ? ` sheet__panel--${i}` : ""}`,
           tabIndex: -1,
-          onKeyDown: d,
+          onKeyDown: u,
           children: [
             /* @__PURE__ */ l("header", { className: "sheet__header", children: [
-              /* @__PURE__ */ t("h2", { className: "sheet__title", id: c, children: r }),
-              /* @__PURE__ */ t("button", { type: "button", className: "sheet__close", "aria-label": "关闭", onClick: n, children: /* @__PURE__ */ t(_e, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) })
+              /* @__PURE__ */ t("h2", { className: "sheet__title", id: b, children: r }),
+              o ? /* @__PURE__ */ t("button", { type: "button", className: "sheet__close", "aria-label": "关闭", onClick: n, children: /* @__PURE__ */ t(_e, { size: 16, strokeWidth: 2, "aria-hidden": "true" }) }) : null
             ] }),
-            /* @__PURE__ */ t("div", { className: "sheet__body", children: i }),
-            o ? /* @__PURE__ */ t("footer", { className: "sheet__footer", children: o }) : null
+            /* @__PURE__ */ t("div", { className: "sheet__body", children: s }),
+            c ? /* @__PURE__ */ t("footer", { className: "sheet__footer", children: c }) : null
           ]
         }
       )
@@ -6483,10 +6483,10 @@ function ne(e) {
 function we(e, n) {
   return new Date(e.getFullYear(), e.getMonth(), e.getDate() + n);
 }
-function ot(e, n) {
+function st(e, n) {
   return new Date(e.getFullYear(), e.getMonth() + n, 1);
 }
-function ht(e) {
+function ft(e) {
   return new Date(e.getFullYear(), e.getMonth(), 1);
 }
 function Se(e, n) {
@@ -6496,13 +6496,13 @@ function Ea(e, n) {
   return Math.round((n.getTime() - e.getTime()) / 864e5) + 1;
 }
 function Ia(e) {
-  const n = ht(e), r = we(n, -n.getDay());
+  const n = ft(e), r = we(n, -n.getDay());
   return Array.from({ length: 42 }, (a, i) => {
     const o = we(r, i);
     return { date: o, inMonth: o.getMonth() === n.getMonth() };
   });
 }
-function st(e, n, r) {
+function lt(e, n, r) {
   return !!(n && ne(e) < ne(n) || r && ne(e) > ne(r));
 }
 function Wt(e, n, r) {
@@ -6517,7 +6517,7 @@ function Sa({
   today: o = /* @__PURE__ */ new Date()
 }) {
   const [s, c] = H(
-    () => ht(Wt(e.start ?? o, a, i))
+    () => ft(Wt(e.start ?? o, a, i))
   ), [d, b] = H(null), [u, f] = H(() => Wt(e.start ?? o, a, i)), [_, m] = H(""), N = A(/* @__PURE__ */ new Map()), x = A(null), h = Ia(s);
   G(() => {
     if (!x.current) return;
@@ -6534,7 +6534,7 @@ function Sa({
     n({ start: p, end: k }), m(`已选择 ${ne(p)} 至 ${ne(k)}，共 ${Ea(p, k)} 天`);
   }
   function g(v) {
-    st(v, a, i) || ((v.getMonth() !== s.getMonth() || v.getFullYear() !== s.getFullYear()) && c(ht(v)), f(v), x.current = ne(v));
+    lt(v, a, i) || ((v.getMonth() !== s.getMonth() || v.getFullYear() !== s.getFullYear()) && c(ft(v)), f(v), x.current = ne(v));
   }
   function R(v) {
     let p = null;
@@ -6558,14 +6558,14 @@ function Sa({
         p = we(u, 6 - u.getDay());
         break;
       case "PageUp":
-        p = ot(u, -1);
+        p = st(u, -1);
         break;
       case "PageDown":
-        p = ot(u, 1);
+        p = st(u, 1);
         break;
       case "Enter":
       case " ":
-        v.preventDefault(), st(u, a, i) || C(u);
+        v.preventDefault(), lt(u, a, i) || C(u);
         return;
       default:
         return;
@@ -6573,7 +6573,7 @@ function Sa({
     v.preventDefault(), p && g(p);
   }
   function y(v) {
-    const p = ot(s, v);
+    const p = st(s, v);
     c(p), f(p);
   }
   const E = `${s.getFullYear()} 年 ${s.getMonth() + 1} 月`;
@@ -6605,7 +6605,7 @@ function Sa({
     ] }),
     /* @__PURE__ */ t("div", { className: "calendar__weekdays", "aria-hidden": "true", children: qa.map((v, p) => /* @__PURE__ */ t("span", { className: "calendar__weekday", children: v }, `${v}-${p}`)) }),
     /* @__PURE__ */ t("div", { className: "calendar__grid", role: "grid", "aria-label": E, onKeyDown: R, children: h.map(({ date: v, inMonth: p }) => {
-      const k = !p || st(v, a, i), M = Se(v, w.start), S = Se(v, w.end), T = !!w.start && !!w.end && !Se(w.start, w.end), z = T && ne(v) > ne(w.start) && ne(v) < ne(w.end), I = U(
+      const k = !p || lt(v, a, i), M = Se(v, w.start), S = Se(v, w.end), T = !!w.start && !!w.end && !Se(w.start, w.end), z = T && ne(v) > ne(w.start) && ne(v) < ne(w.end), I = U(
         "calendar__cell",
         z ? "calendar__cell--in-range" : "",
         T && M ? "calendar__cell--range-start" : "",

package/dist-pkg/style.css

@@ -7751,11 +7751,23 @@ a.q1-card:focus-visible {
     0 2px 6px color-mix(in srgb, var(--q1-color-shadow) 12%, transparent),
     0 8px 40px color-mix(in srgb, var(--q1-color-shadow) 28%, transparent);
 }
+.sheet__panel--sm {
+  --q1-sheet-width: 360px;
+}
+.sheet__panel--md {
+  --q1-sheet-width: 480px;
+}
+.sheet__panel--lg {
+  --q1-sheet-width: 640px;
+}
+.sheet__panel--xl {
+  --q1-sheet-width: 860px;
+}
 .sheet__panel--right,
 .sheet__panel--left {
   top: calc(var(--q1-space-3) + env(safe-area-inset-top, 0px));
   bottom: calc(var(--q1-space-3) + env(safe-area-inset-bottom, 0px));
-  width: min(512px, calc(100vw - 2 * var(--q1-space-3)));
+  width: min(var(--q1-sheet-width, 512px), calc(100vw - 2 * var(--q1-space-3)));
 }
 .sheet__panel--right {
   right: calc(var(--q1-space-3) + env(safe-area-inset-right, 0px));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q1travel/design-system",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "private": false,
   "type": "module",
   "main": "./dist-pkg/design-system.js",
@@ -37,7 +37,7 @@
     "check:shell": "npm run sync:contracts && node scripts/check-shell.mjs && node scripts/check-token-package.mjs && npm run check:release-provenance",
     "check:browser:strictmode": "node scripts/check-browser.mjs --strictmode-ref",
     "check:browser": "npm run check:browser:strictmode && node scripts/check-browser.mjs",
-    "check:package-api": "node scripts/check-package-api.mjs && node --test scripts/check-q1-design-lint.test.mjs && node --test scripts/check-json-view-contract.test.mjs && node --test scripts/check-verification-code-input.test.mjs && node --test scripts/check-controls-contract.test.mjs && node --test scripts/check-pagination-contract.test.mjs && node --test scripts/check-table-core.test.mjs scripts/check-table-interaction.test.mjs scripts/check-table-layout.test.mjs && node --test scripts/check-overlay-coordination.test.mjs",
+    "check:package-api": "node scripts/check-package-api.mjs && node --test scripts/check-q1-design-lint.test.mjs && node --test scripts/check-json-view-contract.test.mjs && node --test scripts/check-verification-code-input.test.mjs && node --test scripts/check-controls-contract.test.mjs && node --test scripts/check-pagination-contract.test.mjs && node --test scripts/check-table-core.test.mjs scripts/check-table-interaction.test.mjs scripts/check-table-layout.test.mjs && node --test scripts/check-overlay-coordination.test.mjs scripts/check-sheet-contract.test.mjs",
     "check:release-provenance": "node --test scripts/check-release-provenance.test.mjs && node scripts/check-release-provenance.mjs",
     "check:release-sync": "node --test scripts/release-npm.test.mjs",
     "release:npm": "node scripts/release-npm.mjs",