// Side Sheet — Vendoo Design System  (SideSheet)
// ─────────────────────────────────────────────────────────────────────────────
// The REAL component body, lifted VERBATIM from the design-system source
//   side-sheet/SideSheet.jsx
// The published _ds_bundle.js predates this component and does not export it, so
// — exactly like UploadProgress.jsx / CircularProgress.jsx / ProgressBar.jsx /
// Steps.jsx — this file registers the export on window.VendooDesignSystem_a81b7b
// instead of using a top-level ESM `export` (the in-browser Babel transform
// rejects `export`). The playground renders this straight from the namespace;
// nothing is reimplemented.
//
// A docked surface (320, max 400) that slides in from the trailing edge to hold
// secondary content, settings, or filters beside the main view. A header (title +
// close, optional back), a flexible CONTENT SLOT (children), and an optional action
// bar (Outline + Filled small buttons over a hairline divider).
// Built on tokens.css; requires tokens.css and assets/icons.js. React is global.
// ─────────────────────────────────────────────────────────────────────────────
(function () {
  const React = window.React;
  const ns = (window.VendooDesignSystem_a81b7b = window.VendooDesignSystem_a81b7b || {});

  const VDS_SIDESHEET_CSS = `
.vds-sheet{ box-sizing:border-box; width:320px; max-width:400px; height:100%; min-height:480px;
  background:var(--sys-surface); border-left:1px solid var(--sys-outline-variant);
  display:flex; flex-direction:column; overflow:hidden; text-align:left;
  font-family:"Lexend",system-ui,sans-serif; }
.vds-sheet__header{ box-sizing:border-box; flex:none; display:flex; align-items:center;
  gap:4px; min-height:76px; padding:12px 12px 16px 24px; }
.vds-sheet--back .vds-sheet__header{ padding-left:12px; }
.vds-sheet__title{ flex:1 1 auto; min-width:0; margin:0; font:var(--type-title-large); letter-spacing:0;
  color:var(--sys-on-surface-variant); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vds-sheet--back .vds-sheet__title{ margin-left:4px; }

/* icon button — Standard IconButton (48), 24px glyph, on-surface-variant */
.vds-sheet__ib{ appearance:none; -webkit-appearance:none; flex:none; width:48px; height:48px; margin:0; padding:0;
  border:0; background:transparent; cursor:pointer; border-radius:var(--radius-xs);
  display:inline-flex; align-items:center; justify-content:center; color:var(--sys-on-surface-variant);
  -webkit-tap-highlight-color:transparent; }
.vds-sheet__ib > span{ position:relative; overflow:hidden; width:40px; height:40px; border-radius:var(--radius-xs);
  display:flex; align-items:center; justify-content:center; }
.vds-sheet__ib > span::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:transparent;
  transition:background-color var(--dur-short,100ms) var(--ease-standard,cubic-bezier(0.2,0,0,1)); }
.vds-sheet__ib:hover > span::before{ background:var(--state-layers-onSurface-opacity-0_08); }
.vds-sheet__ib:active > span::before{ background:var(--state-layers-onSurface-opacity-0_10); }
.vds-sheet__ib:focus-visible{ outline:none; }
.vds-sheet__ib:focus-visible > span{ box-shadow:0 0 0 2px var(--sys-primary); }
.vds-sheet__ib v-icon{ position:relative; z-index:1; display:block; width:24px; height:24px; }

/* content slot — children mount here; scrolls when content overflows */
.vds-sheet__content{ flex:1 1 auto; min-height:0; overflow:auto; display:flex; flex-direction:column;
  align-items:stretch; }

/* action bar — hairline divider + right-aligned Small Outline + Filled buttons */
.vds-sheet__actions{ flex:none; }
.vds-sheet__divider{ height:1px; border:0; margin:0; background:var(--sys-outline-variant); }
.vds-sheet__buttons{ display:flex; justify-content:flex-end; align-items:center; gap:8px; padding:12px 24px; }
.vds-sheet__btn{ height:var(--size-control-default,48px); display:inline-flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; border-radius:var(--radius-xs); padding:0 var(--space-12,12px);
  font:var(--type-label-large); letter-spacing:0.1px; position:relative; overflow:hidden; isolation:isolate;
  font-family:"Lexend",system-ui,sans-serif;
  transition:background-color var(--dur-medium,150ms) var(--ease-standard,cubic-bezier(0.2,0,0,1)); }
.vds-sheet__btn > span{ position:relative; z-index:1; }
.vds-sheet__btn::after{ content:""; position:absolute; inset:0; z-index:0; opacity:0;
  transition:opacity var(--dur-medium,150ms) var(--ease-standard,cubic-bezier(0.2,0,0,1)); }
.vds-sheet__btn--outline{ background:transparent; color:var(--sys-on-surface-variant);
  border:1px solid var(--sys-outline-variant); }
.vds-sheet__btn--outline::after{ background:var(--state-layers-onSurface-opacity-0_08); }
.vds-sheet__btn--outline:active::after{ background:var(--state-layers-onSurface-opacity-0_10); }
.vds-sheet__btn--filled{ background:var(--sys-primary); color:var(--sys-on-primary); }
.vds-sheet__btn--filled::after{ background:var(--state-layers-onPrimary-opacity-0_08); }
.vds-sheet__btn--filled:active::after{ background:var(--state-layers-onPrimary-opacity-0_16); }
.vds-sheet__btn:hover::after{ opacity:1; }
`;

  function vdsInjectCss(id, css) {
    if (typeof document === "undefined" || document.getElementById(id)) return;
    const s = document.createElement("style");
    s.id = id; s.textContent = css; document.head.appendChild(s);
  }

  function SideSheet(props) {
    props = props || {};
    var title = props.title == null ? "Title" : props.title;
    var showBack = !!props.showBack;
    var showActions = props.showActions !== false;
    var primaryAction = props.primaryAction == null ? "Action" : props.primaryAction;
    var secondaryAction = props.secondaryAction == null ? "Action" : props.secondaryAction;

    vdsInjectCss("vds-sidesheet-css", VDS_SIDESHEET_CSS);

    return (
      <aside
        className={"vds-sheet" + (showBack ? " vds-sheet--back" : "")}
        role="complementary"
        aria-label={title}
        style={props.style}
      >
        <div className="vds-sheet__header">
          {showBack && (
            <button className="vds-sheet__ib" aria-label="Back" onClick={props.onBack}>
              <span><v-icon name="arrow_left"></v-icon></span>
            </button>
          )}
          <h2 className="vds-sheet__title">{title}</h2>
          <button className="vds-sheet__ib" aria-label="Close" onClick={props.onClose}>
            <span><v-icon name="x"></v-icon></span>
          </button>
        </div>

        <div className="vds-sheet__content">{props.children}</div>

        {showActions && (
          <div className="vds-sheet__actions">
            <hr className="vds-sheet__divider" />
            <div className="vds-sheet__buttons">
              {secondaryAction && (
                <button className="vds-sheet__btn vds-sheet__btn--outline" onClick={props.onSecondary}><span>{secondaryAction}</span></button>
              )}
              {primaryAction && (
                <button className="vds-sheet__btn vds-sheet__btn--filled" onClick={props.onPrimary}><span>{primaryAction}</span></button>
              )}
            </div>
          </div>
        )}
      </aside>
    );
  }

  ns.SideSheet = SideSheet;
})();